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 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,
  () => { 
    console.log('The animation is finished.'); 
  } 
); 

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

.animate({properties}, {options}) 

In this...