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.
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:
You can hide it again with the
You can indicate the speed at which the element should be shown or hidden, ...