Documented color animation.

scottgonzalez · scottgonzalez · commit 7f44fd20bb77 · 2013-05-23T14:08:31.000-04:00
diff --git a/pages/color-animation.md b/pages/color-animation.md
@@ -0,0 +1,48 @@
+<script>{
+	"title": "Color Animation",
+	"excerpt": "Animate colors using .animate().",
+	"termSlugs": {
+		"category": [ "effects", "effects-core" ]
+	}
+}</script>
+
+jQuery UI effects core adds the ability to animate color properties using `rgb()`,
+`rgba()`, hex values, or even color names such as `"aqua"`. Simply include the
+jQuery UI effects core file and [`.animate()`](http://api.jquery.com/animate/)
+will gain support for colors.
+
+The following properties are supported:
+
+* `backgroundColor`
+* `borderBottomColor`
+* `borderLeftColor`
+* `borderRightColor`
+* `borderTopColor`
+* `color`
+* `columnRuleColor`
+* `outlineColor`
+* `textDecorationColor`
+* `textEmphasisColor`
+
+Support for color animation comes from the
+[jQuery Color plugin](https://github.com/jquery/jquery-color). The Color plugin
+provides several functions for working with colors. For full documentation, please
+see the [jQuery Color documentation](https://github.com/jquery/jquery-color#readme).
+
+## Class Animations
+
+While there are use cases for directly animating individual color properties, it
+is often a better approach to contain the styles in a class. jQuery UI provides
+a few methods which will animate the addition or removal of a CSS class,
+specifically [`.addClass()`](/addClass/), [`.removeClass()`](/removeClass/),
+[`.toggleClass()`](/toggleClass/), and [`.switchClass()`](/switchClass/). These
+methods will automatically determine which properties need to change and apply
+the appropriate animations.
+
+## Example
+
+```html
+@partial(resources/color-animation.html)
+```
+
+<iframe src="/resources/color-animation.html" width="100%" height="200"></iframe>
diff --git a/resources/color-animation.html b/resources/color-animation.html
@@ -0,0 +1,34 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>Color Animation Demo</title>
+	<link rel="stylehseet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
+	<style>
+	#elem {
+		color: #006;
+		background-color: #aaa;
+		font-size: 25px;
+		padding: 1em;
+		text-align: center;
+	}
+	</style>
+	<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
+	<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
+</head>
+<body>
+
+<div id="elem">color animations</div>
+<button id="toggle">animate colors</button>
+
+<script>
+$( "#toggle" ).click(function() {
+	$( "#elem" ).animate({
+		color: "green",
+		backgroundColor: "rgb( 20, 20, 20 )"
+	});
+});
+</script>
+
+</body>
+</html>
