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 handler 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. In addition, you’ll also learn how to combine CSS3 animations with jQuery’s tools for super-smooth (and easy) animation effects.
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:
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 ...