Javatpoint Logo
Javatpoint Logo

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.

Test it Now

jQuery UI Color Animate with Toggle

Let's take an example to demonstrate the color animate method with the use of toggle effect:

Test it Now
Next TopicjQuery UI Easing




Please Share

facebook twitter google plus pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA