O'Reilly logo

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

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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.

    This page allows you to hide and show elements. At first, it reveals nothing much.

    Figure 3.1. This ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required