Web Development with jQuery

Chapter 8Animation 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 ...