jQuery Custom Effects

Last Updated Jul 21, 2015, 12:00:06 PM




jQuery Effect animate() Method

jQuery animate() method performs a custom animation effects based on CSS styles that are supplied to it. The required parameter for the animate method is a plain object of CSS properties.

Syntax

The following is the animation example which has CSS styles like width, opacity, margin-left and etc in order to animate the div element.

Example
Try It Now

jQuery Effect clearQueue() Method

The jQuery clearQueue() method is used to remove all items from the queue that have not been run yet. Note that, when a function has started to run, it will run until it is completed.

Syntax

jQuery clearQueue() method takes one optional parameter queue name.

Here is an example how to usejQuery clearQueue()

Example Output

Try It Now

jQuery Effect delay() Method

jQuery delay() method was introduced in jQuery version 1.4. The delay() method delays function to execute and follow it in the queue. Basically, delay method sets the timer to execute next function in the queue.

Syntax

Duration is the parameter to delay the method which is in milliseconds. Duration can be used like higher values indicate slower animations. The strings 'fast' and 'slow' can be supplied as parameters to indicate durations of 200 and 600 milliseconds, respectively.

Here is the jquery delay() method example

Example Output

Try It Now

Other Advanced jQuery Effects you might want to learn

jQuery Basic Effects

jQuery Fading Effects

jQuery Sliding Effects

Sources and Credits

The content and methods in the tutorial has been referred and updated with jQuery API and The jQuery Foundation

Last Updated Jul 21, 2015, 12:00:06 PM