JavaScript & jQuery: The Missing Manual, 2nd Edition

Chapter 6. Animations and Effects

In the last two chapters, you learned the basics of using jQuery: how to load the jQuery library, select page elements, and respond to events like a visitor clicking on a button or mousing over a link. Most jQuery programs involve three steps: selecting an element on the page, attaching an event to that element, and then responding to that event by doing something. In this chapter, you’ll start learning about the “doing something” part with jQuery’s built-in effect and animation functions. You’ll also get a little CSS-refresher covering a few important CSS properties related to creating visual effects.

jQuery Effects

Making elements on a web page appear and disappear is a common JavaScript task. Drop-down navigation menus, pop-up tooltips, and automated slideshows all rely on the ability to show and hide elements when you want to. jQuery supplies a handful of functions that achieve the goal of hiding and showing elements.

To use each of these effects, you apply them to a jQuery selection, like any other jQuery function. For example, to hide all tags with a class of submenu, you can write this:

$('.submenu').hide();

Each effect function also can take an optional speed setting and a callback function. The speed represents the amount of time the effect takes to complete, while a callback is a function that runs when the effect is finished. (See Performing an Action After an Effect Is Completed on page 196 for details on callbacks.)

To assign a speed to an ...