jQuery UI API - Color Animation
The jQuery UI Effects Core adds the ability to animate color properties using rgb(), rgba(), hexadecimal values, or color names like "aqua". Simply include the jQuery UI Effects Core file, and .animate() will support colors.
The following properties are supported:
backgroundColorborderBottomColorborderLeftColorborderRightColorborderTopColorcolorcolumnRuleColoroutlineColortextDecorationColortextEmphasisColor
Support for color animations comes from the jQuery Color plugin. The Color plugin provides several functions for colors. For complete documentation, visit the jQuery Color documentation.
Class Animations
Although you can animate color properties directly, a better approach is often to include the styles in a class. jQuery UI provides methods for dynamically adding or removing CSS classes, namely .addClass(), .removeClass(), .toggleClass(), and .switchClass(). These methods automatically determine which properties need to change and apply the appropriate animations.
Example
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Color Animation Demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/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.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<div id="elem">Color Animation</div>
<button id="toggle">Change Color</button>
<script>
$( "#toggle" ).click(function() {
$( "#elem" ).animate({
color: "green",
backgroundColor: "rgb( 20, 20, 20 )"
});
});
</script>
</body>
</html>