HTML, XHTML, & CSS All-in-One For Dummies®, 2nd Edition

Chapter 3. Animating jQuery

In This Chapter

• Hiding and showing elements with jQuery

• Fading elements in and out

• Adding a callback function to a transition

• Element animation

• Object chaining

• Using selection filters

• Adding and removing elements

The jQuery library simplifies a lot of JavaScript coding. One of its best features is how it adds features that would be difficult to achieve in ordinary JavaScript and DOM programming. This chapter teaches you to shake and bake your programs by identifying specific objects, moving them around, and making them appear, slide, and fade.

Playing Hide and Seek

To get it all started, take a look at hideShow.html shown in Figure 3-1.

The hideShow program looks simple at first, but it does some quite interesting things. All of the level-two headings are actually buttons, so when you click them, interesting things happen:

• The show button displays a previously hidden element. Figure 3-2 demonstrates the revealed content.

• The hide button hides the content. The behavior of the hide button is pretty obvious. If the content is showing, it disappears instantly.

• The toggle button swaps the visibility of the content. If the content is currently visible, it is hidden. If it is hidden, it appears.

• The slide down button makes the content transition in. The slide down transition acts like a window shade being pulled down to make the content visible through a basic animation.

  

  Figure 3.1. This ...