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
Using selection filters
To get your jQuery animation career started, take a look at
hideShow.html, shown in Figure 11-1.
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 ...