Search within TutorialsPark

jQuery UI Effects :animate() Methods


Learn how to use jQuery UI animate() Method to allow visual changes.


jQuery UI Effects : animate() Method

The jQuery UI method of animate() is used to apply visual effects by change CSS properties

Effects can be created by use of CSS color properties like color, background-color, border-color etc.


jQuery UI Effects : animate() Method

In the demo, we create an effect where in the background color and text color of the paragraph gradually changes.

Example: jQuery UI Effect - animate() Method

Give it a TRY! » Note: Notice the way the color changes for both the text and background during the course of animation.


Table: jQuery UI animate() Method Easing Options

The jQuery UI method of animate() provides a rich set of easing options using various easing equations. Eg : easeInOut, easeInCubic , easeInSine etc.

The easing functions sets the speed at which the animation progresses at different times within the course of animation. Some easing will result in negative values during animation.

Example: jQuery UI Methods - hide()

Give it a TRY! » Note: Click on the graphs to see the easing function animation.