jQuery Pocket Reference

Chapter 5. Animated Effects

One powerful feature of client-side JavaScript is that you can script the CSS styles of document elements. By setting the CSS visibility property, for example, you can make elements appear and disappear. With clever programming, you can even produce animated visual effects. Instead of just making an element disappear, for example, you might reduce the value of its opacity property over the period of a half-second so that it quickly fades away instead of just blinking out of existence. This kind of animated visual effect creates a more pleasing experience for users, and jQuery makes them easy.

jQuery defines simple methods such as fadeIn() and fadeOut() for basic visual effects. In addition to simple effects methods, it defines an animate() method for producing more complex custom animations. The sections below explain both the simple effects methods and the more general animate() method. First, however, we’ll describe some general features of jQuery’s animation framework.

For every animation, you need to specify a duration of time—in milliseconds or by using a string—for how long the effect should last. The string “fast” means 200ms. The string “slow” means 600ms. If you specify a duration string that jQuery does not recognize, or if you omit it, you’ll get a default duration of 400ms. You can define new duration names by adding new string-to-number mappings to jQuery.fx.speeds:

jQuery.fx.speeds["medium-fast"] = 300; jQuery.fx.speeds["medium-slow"] = 500; ...