JavaScript: The Definitive Guide, 6th Edition

Animated Effects

Chapter 16 showed how to script the CSS styles of document elements. By setting the CSS visibility property, for example, you can make elements appear and disappear. CSS Animations went on to demonstrate how CSS scripting can be used to produce animated visual effects. Instead of just making an element disappear, for example, we 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 subsections 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.

Every animation has a duration that specifies how long the effect should last for. You specify this as a number of milliseconds or by using a string. The string “fast” means 200ms. The string “slow” means 600ms. If you specify a duration string that jQuery does not recognize, 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;

jQuery’s effect ...