Learning jQuery - Fourth Edition

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: ...