jQuery Cookbook

Chapter 7. Effects

Remy Sharp

Introduction

Out of the box, jQuery comes with a number of preset effects and the robust low-level animation method for creating your own custom effects.

The preset effects include the following:

• Hiding and showing elements in a toggle fashion

• Scaling and simultaneously fading elements in and out of view

• Sliding up and down and toggling

• Fading in and out and to a specific opacity

All of the preset effects support speeds and callback functions to trigger upon completion.

In addition to these predefined effects, there are also a number of utilities that can help you take more control over your animations:

• :animated selector to assess whether an element is in the process of being animated

• The ability to turn off and on all effects across the board

• The ability to add to the animation queue with your own bespoke functions

• Function to change the entire queue of animations

Warning

It’s worth noting that the canned animation methods, hide (with a duration) and slideUp, reduce the margin and padding on the element as they approach zero height. This may affect how you want to mark up the page and CSS for your effect. Also note that jQuery doesn’t officially support effects in documents using QuirksMode.

Animate Method

Using the animate method gives you complete control over the animation to roll your own bespoke effect. Using the animate method, you can do the following:

• Control CSS properties (limited to numerical properties only)

• Control scrollTop and scrollLeft DOM properties ...