Creating custom animations

In addition to the prebuilt 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:

• An object of style properties and values, which is similar to the .css() argument discussed earlier in this chapter

• An optional duration, which can be one of the preset strings or a number of milliseconds

• An optional easing type, which is an option that we will not use now, but which we will discuss in it in Chapter 11, Advanced Effects

• An optional callback function, which will be discussed later in this chapter

All together, the four arguments look like this:

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

The second form takes two arguments: an object of properties and an object of options:

.animate({properties}, {options})

In effect, the second...