Usage examples of animate() method in jQuery_jquery

The example in this article describes the usage of the animate() method in jQuery. Share it with everyone for your reference. The specific analysis is as follows:

This method is used to create a custom animation and can specify the animation execution duration and erasure effect. A callback function can also be triggered after the animation is completed.

Usage of animate() method:

Method 1:

Define animation termination style properties in the form of "property name/value" objects. For example:

The above code can adjust the div from its original width to 1000px. You can also use multiple sets of "property name/value" objects at once. For example:

The above code can adjust the div from the original width to 1000px and the original font size to 20px. You need to pay special attention to the following three points:

1. If the size has no unit, the default unit is px.
2. The attribute value needs to be wrapped in double quotes. If the attribute value is a number, it can be omitted.
3. Attributes like font-szie or background-color need to remove the middle horizontal line, and the first letter of the second word must be capitalized.

animate() method can clearly specify the duration of the animation effect. If not specified, the default value normal will be used. For example:

The above code stipulates that the animation effect will be completed after 2000 milliseconds (2 seconds).
The callback function can be called after the animation execution is completed. For example:

The above code can trigger the callback function after the animation is completed, so a prompt box will pop up.
Example code:

Method 2:
In the first method, curly braces {} are used only when defining animation termination style attributes. The following, such as animation speed, callback function, etc., are exposed, and they are separated by commas. In the second method we will introduce, speed, callback function, queue, etc. must be placed in curly brackets {}. For example:

The queue parameter can specify whether the animation is added to the animation queue for execution. If it enters the animation queue, it will be executed in order, that is, after the first animation is completed, the second animation in the queue will be executed, and so on. If the queue parameter value is true, the animation will be added to the queue for execution, otherwise it will not be added to the queue.
The duration parameter defines the duration of the animation.
The complete parameter defines the callback function of the animation.
Example code:

You can compare the execution effects of joining the animation queue and not joining the animation queue.

I hope this article will be helpful to everyone’s jQuery programming.