12.7. Animation/Effects
Many people become aware of jQuery through seeing one of its many impressive graphical effects.
Let's check out the fadeOut effect using our original example:
Go back to default.htm, and change the helloJQuery() function to contain the following:
$("#div1").fadeOut();
Press F5 to run your application.
Click the Hello jQuery button.
The <div> should then fade out of view.
12.7.1. Effect Overloads
Most of the effects in jQuery are overloaded, allowing fine-grained control (see Table 12-6).
| Example | Meaning |
|---|---|
| $("#div1").fadeOut(); | Basic effect with default options |
| $("#div1").fadeOut(10000); | Effect time specified in milliseconds |
| $("#div1").fadeOut('slow'), | Specifies the time the effect will take to run: slow, normal, or fast |
You can also specify a callback function to be executed when the effect has completed:
function hellojQuery()
{
$("#div1").fadeOut('slow',functionToCall);
}
Function functionToCall()
{
...
}12.7.2. Core Library Effects
Table 12-7 lists jQuery's core effects.
| Example | Meaning |
|---|---|
| $("#div1").hide(); | Hides element. |
| $("#div1").show(); | Shows element. |
| $("#div1").fadeOut(); | Fades out element. |
| $("#div1").fadeIn(); | Fades in element. |
| $("#div1").toggle(); | Toggles display of element. If it is hidden, it will become visible. If it is visible, it will be hidden. |
| $("#div1").slideDown(); | Animates element to become visible like a vertical blind sliding down. |
| $("#div1").slideUp(); | Animates element to become hidden like a vertical blind sliding up. |
| $("#div1").animate({ | Powerful function that animates an element to specified CSS property values over time span in milliseconds specified. |
width: "100%",
fontSize: "100px"
}, 1500 );
$("#div1").stop(); | Stops any animation or effects in progress. |
12.7.3. Additional Effects
In addition to the previous effects, a number of additional effects can be downloaded: fold, pulsate, puff, bounce, and explode (my personal favorite). For more details on these effects, please go to http://docs.jquery.com/UI/Effects.
12.7.4. Glimmer
If you don't want to hand-code your jQuery effects, you can use a great tool called Glimmer produced by Microsoft that offers a wizard-based approach (see Figure 12-4). Refer to http://visitmix.com/lab/glimmer.
Figure 12.4. Glimmer allows you to easily construct jQuery effects.
Glimmer allows the construction of simple effects such as rotating images, drop-down menus, and animation.
12.7.5. jQuery Tools
jQueryPad www.paulstovell.com/jquerypad) and JS Bin (http://jsbin.com/) can be very useful tools for prototyping and playing with jQuery.