What else can we do with the .animate() method?

Question

In the context of this exercise, what else can we do with the .animate() method?

Answer

The .animate() method in jQuery provides a few parameters that can add further customization to animations.

In addition to the parameters covered in this exercise, which were the CSS properties and the duration of the animation, there are two other optional parameters.

One of these is the parameter for the easing of the animation, which lets you specify the speed that the animation progresses at different points of the animation, typically divided into the parts beginning, middle, and end. By default, the value for this parameter is "swing", which causes the animation to move slower at the beginning and the end, but faster in the middle. Another value you can set this to is "linear", which sets the animation to have constant speed progression throughout.

The other optional parameter you can specify in .animate() is a function, which is run after the animation completes.

An example using all the parameters would look as follows,

$('.example-class').animate({
  color: 'blue',
  fontSize: '20px'
}, 700, "easing", function() {
  console.log("Animation completed");
});
8 Likes