jQuery: Common animation effects

This entry is part 17 of 33 in the series jQuery Tutorial

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 such as those used in jqueryui.com or jquerymobile.com.

EffectDescription
.animate()Perform a custom animation of a set of CSS properties.
.delay()Set a timer to delay execution of subsequent items in the queue.
.fadeIn()Display the matched elements by fading them to opaque.
.fadeOut()Hide the matched elements by fading them to transparent.
.fadeTo()Adjust the opacity of the matched elements.
.finish()Stop the currently-running animation, remove all queued animations, and complete all animations for the matched elements.
.hide()Hide the matched elements.
.show()Display the matched elements.
.slideDown()Display or hide the matched elements with a sliding motion.
.slideUp()Hide the matched elements with a sliding motion.
.slideToggle()Display or hide the matched elements with a sliding motion.
.toggle()Display or hide the matched elements.
Series Navigation<< jQuery: Animations and Effects.
jQuery: .toggleClass >>