JavaScript® and AJAX for Dummies®

Chapter 11. Animating jQuery

In This Chapter

• Setting up for animation

• Hiding and showing elements with jQuery

• Fading elements in and out

• Adding a callback function to a transition

• Understanding object chaining

• Modifying elements

• Using selection filters

The jQuery library simplifies a lot of JavaScript coding. One of its biggest advantages is how it allows you to add features that would be difficult to achieve in ordinary JavaScript and DOM (document object model) 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.

Getting Prepared for Animation

To get your jQuery animation career started, take a look at hideShow.html, shown in Figure 11-1.

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

• The Show button displays a previously hidden element. Figure 11-2 demonstrates the new content.

• The Hide button hides the content. The behavior of the hide button is pretty obvious. If the content is showing, clicking the button makes it disappear instantly.

• The Toggle button swaps the visibility of the content. If the content is currently visible, clicking the button hides it. If it is hidden, a click of the button makes it show up.

  

  Figure 11.1. At first, the page shows nothing ...