jQuery Pocket Reference

Custom Animations

You can use the animate() method to produce more general animated effects than are available with the simple effects methods. The first argument to animate() specifies what to animate, and the remaining arguments specify how to animate it. The first argument is required: it must be an object whose properties specify CSS attributes and their target values. animate() animates the CSS properties of each element from its current value to the specified target value. So, for example, the slideUp() effect described above can also be performed with code like this:

// Shrink the height of all images to 0
$("img").animate({ height: 0 });

As an optional second argument, you can pass an options object to animate():

$("#sprite").animate({
    opacity: .25,      // Animate opacity to .25
    font-size: 10      // Animate font size to 10 pixels
}, {
    duration: 500,     // Animation lasts 1/2 second
    complete: function() {    // Call this when done
        this.text("Goodbye"); // Change element text.
    } 
});

Instead of passing an options object as the second argument, animate() also allows you to specify three of the most commonly used options as arguments. You can pass the duration (as a number or string) as the second argument. You can specify the name of an easing function (which will be explained shortly) as the third argument. And you can specify a callback function as the fourth argument.

In the most general case, animate() accepts two object arguments: the first specifies what to animate, and the second specifies ...