HTML, XHTML, and CSS All-In-One Desk Reference For Dummies®

Chapter 3. Animating with jQuery

In This Chapter

• Adding jQuery effects

• Getting familiar with the jQuery user interface

• Working with Interface Elements for jQuery

In this chapter, you work with some slightly more advanced jQuery selectors, as well as discover how to use neat effects and other user Interface Elements, such as draggable items and custom dialog boxes.

jQuery's Special Effects

After you're comfortable with the jQuery library, you can start doing fun and flashy things that really add a little zing to your Web site. When used correctly, effects can take your site from an amateur-looking homepage to a professionally done Web site.

Predefined animations

All the jQuery effects really come down to showing and hiding elements in slightly different ways. Showing and hiding elements gives you a perfect way to make custom pop-ups, drop-down navigation menus, and many other nifty-looking page elements. The effects are broken down into four different categories:

• Show: Make a hidden element appear.

• Slide: The element slides into place.

• Fade: Change the transparency.

• Custom animations: Move the element along a specified path.

The most basic form of showing and hiding elements is done through the Show effect. Simply indicate the hidden page element you wish to show and tell it to show itself by entering the following code:

$("#hiddenElement").show();

You can hide it again with the hide function:

$("#visibleElement").hide();

You can indicate the speed at which the element should be shown or hidden, ...