Creating custom animations

In addition to the pre-built effect methods, jQuery provides a powerful .animate() method that allows us to create our own custom animations with fine-grained control. The .animate() method comes in two forms. The first takes up to four arguments, which are as follows:

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

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

3. An optional easing type—an advanced option discussed in Chapter 11, Advanced Effects

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

All together, the four arguments look similar to the following code snippet:

.animate({property1: 'value1', property2: 'value2'}, 
  speed, easing, function() {
    alert('The animation is finished.');
  }
);

The second form takes two arguments: a map of properties and a map of options:

.animate({properties}, {options})

In effect, the second argument wraps up the second...