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