YouTipColor Animation
$( "#toggle" ).click(function() { $( "#elem" ).animate({ color: "green", backgroundColor: "rgb( 20, 20, 20 )" });});
(#)Api Color Animation
# jQuery UI API - Color Animation
The jQuery UI Effects Core adds the ability to dynamically change color properties using `rgb()`, `rgba()`, hex values, or color names like `"aqua"`. By simply including the jQuery UI Effects Core file, [`.animate()`](#) will support colors.
The following properties are supported:
* `backgroundColor`
* `borderBottomColor`
* `borderLeftColor`
* `borderRightColor`
* `borderTopColor`
* `color`
* `columnRuleColor`
* `outlineColor`
* `textDecorationColor`
* `textEmphasisColor`
Support for color animations comes from the (https://github.com/jquery/jquery-color). The Color plugin provides a number of functions for working with colors. For full documentation, please visit the (https://github.com/jquery/jquery-color#readme).
## Class Animations
While it's possible to animate color properties directly, a better approach is often to include styles in a class. jQuery UI provides methods for dynamically adding or removing CSS classes: [`.addClass()`](#), [`.removeClass()`](#), [`.toggleClass()`](#), and [`.switchClass()`](#). These methods will automatically determine which properties need to change and apply the appropriate animations.
## Example
Color Animation Demo #elem { color: #006; background-color: #aaa; font-size: 25px; padding: 1em; text-align: center; }