Animation and Easing Effects
jQuery does a lot to make the life of a developer easier, but jQuery does not stop at making
it easier to traverse the DOM, or manipulate, or iterate, or all the other cool things you’ve
learned about in the preceding chapters. It also gives you the tools to make your documents
look polished, professional, and sophisticated via animation and a plethora of special effects.
This chapter presents how to work with the API that jQuery provides for dealing with effects.As you’ve seen in examples in previous chapters, jQuery can toggle the display of elements
between hidden and displayed states using its show() and hide() methods. What you may not
have already learned is that those methods also have the ability to animate between hidden
and displayed states via a short animation.jQuery also gives you the ability to animate an element between hidden and displayed states
by animating an element’s height, in addition to the ability to fade elements on and off via an
animation of an element’s opacity, all with a simple and trivial function call.Finally, jQuery also has the cability to animate objects in your document between arbitrary
numeric styles, which gives you the ability to create your own, custom animations.Showing and Hiding Elements
jQuery provides three methods for showing and hiding elements: show(), hide(), and toggle().
You’ve seen examples of show() and hide() in previous chapters. By default, these three methods
simply make an object visible or invisible by toggling that element’s CSS display property. These
methods make it easier to turn elements on or off. What you haven’t learned about these prop-
erties yet is that you can also supply arguments to these methods that customize an animation
of the transition from visible to invisible or vice versa via easings. Easings are algorithms that
control how an animation progresses over time. For example, an animation may begin quickly,
and as time goes on, the transformation may become slower or faster. An algorithm determines
how time is applied to the animation. Easings may be visualized as a single line on a graph that
represents how time is altered and applied throughout the duration of an animation. Easings
may also alter the animation. For example, an easing that includes bouncing can produce a tran-
sition in which the transformation of an object appears to bounce. When animating the width of