jQuery’s animate() method allows you to animate multiple CSS properties, with numeric values, in a single step.

We have advanced a lot in it and with the knowledge acquired so far we are ready to learn anything more advanced in this Javascript framework. The time has come to dedicate ourselves to showing the ways in which we can create effects to decorate our pages and make the user experience more attractive. In past .com articles we have already shown some ways of doing it and from now on we will explain the operation of other methods, more complex but also more versatile.

In this article, we are going to start learning about the animate() method, one of the most interesting for creating effects in jQuery by modifying CSS properties. This method, as we will see, is quite versatile, since with it we can create many types of animations, as many as CSS attribute combinations we can have. It basically serves to offer a list of CSS attributes, with the new values ​​to which we want to update them, and jQuery will take care of making this modification so that it is quite smooth.

For example, we have an element with the CSS attributes width and height with values ​​”X and Y” and we want to animate them so that these attributes change to have values ​​”Z and T” With the animate() method we can make these attributes change from about values ​​to others without abrupt changes, and instead do it with a smooth animation from one value to another.

Parameters of the animate() method

To call the animate() method we have to indicate a series of parameters, although only one of them will be mandatory. The list is as follows:

.animate( Properties, , , )

Properties: This is the only parameter that must be indicated and it is to indicate which CSS attributes we want to update, with their new values. It has to be specified in object notation, similar to how you can specify it in jQuery’s css() method, and only allows changing of CSS properties that have numeric values. For example, we could change the width of a border, but not the type of border (whether we want it to be solid, dotted, etc.) because it has no numeric values. Generally, if we do not specify something else, the values ​​are understood in pixels. The new values ​​can be indicated in an absolute way, or even in a relative way, with a string of the type “+=50”, which indicates that this attribute should be increased by 50. In the examples of this and following articles that we publish in we will see several ways to indicate the properties to perform various animations.

Duration: It is used to indicate the duration of the animation, in a numerical value in milliseconds, or in a character string value such as “fast” or “slow”.

Animation function: This function is used to indicate how the animation will be performed, if smoother at the beginning and faster at the end, or equally fast all the time. That is, the speed with which the change of values ​​will be made at different points within the animation. In principle, the two possible values ​​are “swing” (default) and “linear”.

Callback: Offers the possibility of indicating a function to be executed when the effect has completely finished producing. That is, a function that is called when the final value of the CSS attributes that were requested to change has been reached.

jQuery example of animate() method

To finish we are going to see an example of the animate() method, but quite simplified. Actually we are only going to use the first of the parameters, to indicate the CSS properties that we want to animate.

We will have a headline on the H1 page with some style attributes:

jQuery animation

Our animation will make the border of the element 20px wide and the font size go up to 25pt. To start it we would use a code like the following:

$(“h1”).animate({
‘border-bottom-width’: “20”,
‘font-size’: ’25pt’
});

As you can see, in object notation we indicate two CSS attributes and the two values ​​we want to animate them to. The first of the values, which has no units, is considered as pixels. The second value, which is in points (pt), will cause jQuery to use those units instead of pixels.

Also, we can see that in this case we have only passed one parameter to animate() with the list of CSS properties to animate. Therefore, we let jQuery use the default values ​​for animation time and animation function.

But let’s look at a page that makes use of that method, with the complete code. As we will see, on the page we will also have two links, one to start the animation and another to restore the CSS of the elements to the original values. So, while we see how to do an animate(), we will also learn how to launch animations in response to user events.

jQuery animation

Working with the animate method:
Animate

I go back to what was before:
Restore

This example can