jQuery animation basics

To start off, we already have a little experience with jQuery animation. Let's refresh: In Chapter 2, Working with jQuery in WordPress, in the Events and effects section, we learned about the following functions: show(), hide(), fadeIn(), fadeOut(), fadeTo(), slideUp(), slideDown(), and slideToggle(). I had also mentioned the animate() and stop() functions.

We've already worked with several of these functions in our previous projects in Chapter 2, Working with jQuery in WordPress; Chapter 3, Digging Deeper: Understanding jQuery and WordPress Together; and Chapter 4, Doing a Lot More with Less: Making Use of Plugins for Both jQuery and WordPress, particularly, show() and hide(), as well as fadeTo() and slideToggle(). As we've seen, a very large portion of your animation needs are easily met with these shortcut functions, though at the same time, limited by them. Let's now take a closer look at the animate() function and pick up some fine grain control over our jQuery...