Multiple Effects

Of the simple effects bundled in the jQuery core, only show() and hide() modify more than one style property at a time—height, width, and opacity. The others change a single property:

• fadeIn() and fadeOut(): opacity

• fadeTo(): opacity

• slideDown() and slideUp(): height

However, jQuery also provides a powerful animate() method that allows us to create our own custom animations with multiple effects. The animate method takes four arguments:

1. 1. A map of style properties and values—similar to the .css() map discussed earlier in this chapter

2. 2. An optional speed—which can be one of the preset strings or a number of milliseconds

3. 3. An optional easing type—an advanced option discussed in Chapter 10

4. 4. An optional callback function—which will be discussed later in this chapter

All together, the three arguments would look like this:

.animate({param1: 'value1', param2: 'value2'}, speed, function() {
  alert('The animation is finished.');
});

Building an Animated show()

Let’s take another look...