Beginning JavaScript® and CSS Development with jQuery

Chapter 8. Effects

Up to this point, you've been learning about jQuery's nuts and bolts. 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 of the other very cool things you've learned about in the preceding chapters. It also gives you the tools to make your documents look very polished, professional, and sophisticated via animation and some rudimentary special effects. In this chapter, I present 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 ability 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 ...