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:

Copy code The code is as follows:

$("div").animate({width:"1000px"})

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:

Copy code The code is as follows:

$("div").animate( {width: "1000px",fontSize: 20})

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.

The

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

Copy code The code is as follows:

$("div").animate( {width: "1000px",fontSize: 20},2000)

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:

Copy code The code is as follows:

$("div").animate( {width: "1000px"},5000 ,function(){alert("Adjustment completed")})

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

Copy code The code is as follows:

Little Ant

Execute animation

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:

Copy code The code is as follows:

$("div").animate( {width: "1000px"}, { queue:false, duration:1000,complete:function(){alert("ok")}})

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:

Copy code The code is as follows:

Welcome to the script home

Welcome to the script home

Execute the first animation
Execute the second animation

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.