96
jQuery UI Color Animation
jQuery UI adds some methods in core jQuery to extend the features of animate functionality. You can animate different transitions for an element. jQuery UI also supports animating colors. Here, you can animate one or more CSS properties that define an element colors.
Following is a list of CSS properties that support animate method.
- backgroundColor :It is used to set the background color of the element.
- borderTopColor :It is used to set the color for top side of the element border.
- borderBottomColor :It is used to set the color for bottom side of the element border.
- borderLeftColor :It is used to set the color for left side of the element border.
- borderRightColor : It is used to set the color for right side of the element border.
- color :It is used to set the text color of the element.
- outlineColor : It is used to set the color for the outline; used to emphasize the element.
Syntax for the jQuery UI animate method:
If you want to add more than one property in this method, you will have to separate them with a comma.
Example of jQueryUI Color animation
Let’s take an example to demonstrate the color animate method with the use of addClass() method.
jQuery UI Color Animate with Toggle
Let’s take an example to demonstrate the color animate method with the use of toggle effect:
Next TopicjQuery UI Easing