• Choose a category
• All
• Classic-Fiction

This is a great way to manage content, but it isn’t quite a full-blown content-management system. Even AJAX can’t quite allow you to store content on the Web. More complex content management systems also use databases rather than files to handle content. You’ll need some sort of server-side programming (like PHP, covered throughout Book V) and usually a database (like mySQL, covered in Book VI) to handle this sort of work. Content-management systems and complex site design are covered in Book VIII.

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 page allows you to hide and show elements. At first, it reveals nothing much.

Figure 3-2: The content element is now visible.

♦ The slide up button transitions the content out. This animation looks like a window shade being pulled up to hide the content.

♦ The speed of the animation can be controlled It’s possible to adjust how quickly the transition animation plays. This example plays the slide down animation slowly, and the slide up animation more quickly. It’s possible to specify exactly how long the transition takes in milliseconds (1/1000ths of a second).

♦ The fade in button allows the element to dissolve into visibility. This looks much like a fade effect used in video. As in the sliding animations, the speed of the animation can be controlled.

♦ The fade out button fades the element to the background color. This technique gradually modifies the opacity of the element so that it eventually disappears.

You can adjust how quickly the transition animation plays. You can specify exactly how long the transition takes in milliseconds (1⁄1000 of a second). Also, any transition can have a callback function attached.

Of course, this example relies on animation, which you can’t see in a static book. Be sure to look at this and all other example pages on my Web site: www.aharrisbooks.net. Better yet, install them on your own machine and play around with my code until they make sense to you.

The animations shown in this example are useful when you want to selectively hide and display parts of your page:

♦ Menus are one obvious use. You might choose to store your menu structure as a series of nested lists and only display parts of the menu when the parent is activated.

♦ Small teaser sentences expand to show more information when the user clicks or hovers over them. This technique is commonly used on blog and news sites to let users preview a large number of topics, kind of like a text-based thumbnail image.

Getting transition support

The jQuery library has built-in support for transitions that make