jQuery Effects

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




jQuery Effects

The jQuery library provides several techniques for adding animation to a web page. These include simple, standard animations that are frequently used and the ability to craft sophisticated custom effects.

jQuery Basic Effects

The following table lists all the jQuery basic effects.

Method Description Example
show show method shows the selected elements Try It
hide hide method hides the targeted elements Try It
toggle toggle method toggles between the hide() and show() methods Try It

jQuery Custom Effects

The following table lists all the jQuery custom effects.

Method Description Example
animate animate method runs a custom animation on the selected elements Try It
clearQueue clearQueue method removes all remaining queued functions from the selected elements Try It
delay delay method sets a delay for all queued functions on the selected elements Try It

jQuery Fading Effects

The following table lists all the jQuery methods of fading effects.

Method Description Example
fadeIn fadeInmethod fades in the selected elements Try It
fadeOut fadeOut method Fades out the selected elements Try It
fadeTo fadeTo method fades in/out the selected elements to a given opacity Try It

jQuery Sliding Effects

The following table lists all the jQuery Sliding Effect Methods

Method Description Example
slideDown slideDown method slides-down the selected HTMLelements Try It
slideUp slideUp method slides-up the selected HTMLelements Try It
slideToggle slideToggle method toggles between the slideUp() and slideDown() methods Try It


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