Home > Developer > JavaScript
Example of animate () method usage in jQuery, jqueryanimate
This document describes how to use the animate () method in jQuery. Share it with you for your reference. The specific analysis is as follows:
This method is used to create a Custom Animation and specify the animation duration and erase effect. After the animation is completed, a callback function can be triggered.
Use of the animate () method:
Method 1:
Define the animation termination style attribute as a "property name/value" object.For example:
Copy codeThe Code is as follows: $ ("div"). animate ({width: "1000px "})
The code above can adjust the div width from the original to 1000px. You can also use multiple sets of "attribute name/value" objects at a time. For example:
Copy codeThe Code is as follows: $ ("div"). animate ({width: "1000px", fontSize: 20 })
The code above can adjust the div from the original width to 1000px, and from the original font size to 20px. Pay special attention to the following three points:
1. If the size does not have a unit, the default unit is px.
2. the attribute value must be enclosed in double quotation marks. If the attribute value is a number, it can be omitted.
3. attributes such as font-szie or background-color must be removed from the middle horizontal line and the first letter of the second word must be capitalized.
The animate () method can specify the animation duration. If not specified, the default value is normal. For example:
Copy codeThe Code is as follows: $ ("div"). animate ({width: "1000px", fontSize: 20}, 2000)
The code above specifies that the animation effect is completed after 2000 milliseconds (2 seconds.
You can call the callback function after the animation is executed. For example:
Copy codeThe Code is as follows: $ ("div"). animate ({width: "1000px"}, 5000, function () {alert ("adjusted ")})
The above code triggers the callback function after the animation is complete, so a prompt box is displayed.
Instance code:
Copy codeThe Code is as follows:
<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "UTF-8">
<Meta name = "author" content = "http://www.bkjia.com/"/>
<Title> helping customers </title>
<Style type = "text/css">
Div {
Width: 150px;
Height: 150px;
Border: 1px solid blue;
}
</Style>
<Script type = "text/javascript" src = "mytest/jQuery/jquery-1.8.3.js"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ("Button"). click (function (){
$ ("Div"). animate ({width: "1000px", fontSize: 20}, 5000, function () {alert ("adjusted ")});
});
});
</Script>
</Head>
<Body>
<Div> ant financial </div>
<Button id = "btn1"> execute an animation </button>
</Body>
</Html>
Method 2:
Method 1: Only braces {} are used to define the animation termination style attribute. For example, animation speed and callback functions are exposed, and comma intervals are used between them. In method 2 we will introduce, speed, callback function, queue, and so on should all be placed in braces.For example:
Copy codeThe 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 the animation queue is entered, the animation is executed in sequence, that is, after the first animation is executed, the second animation in the queue is executed again, and so on. If the value of the queue parameter is true, the animation is added to the queue for execution. Otherwise, the animation is not added to the queue.
The duration parameter defines the animation duration.
The complete parameter defines the callback function of the animation.
Instance code:
Copy codeThe Code is as follows:
<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "UTF-8">
<Meta name = "author" content = "http://www.bkjia.com/"/>
<Title> helping customers </title>
<Style type = "text/css">
. First {
Width: 150px;
Height: 150px;
Border: 1px solid blue;
}
. Second {
Width: 150px;
Height: 150px;
Border: 1px solid blue;
}
</Style>
<Script type = "text/javascript" src = "mytest/jQuery/jquery-1.8.3.js"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ("# Btn1"). click (function (){
$ (". First "). animate ({width: "1000px" },{ queue: true, duration: 5000, complete: function a () {alert ("width setting completed ")}})
. Animate ({fontSize: '7em '}, {queue: true, duration: 5000 })
. Animate ({borderWidth: 10}, {queue: true, duration: 5000, complete: function a () {alert ("width setting completed ")}});
});
$ ("# Btn2"). click (function (){
$ (". Second"). animate ({width: "1000px" },{ queue: false, duration: 1000 })
. Animate ({fontSize: '7em '}, 1000)
. Animate ({borderWidth: 10}, 1000 );
})
})
</Script>
</Head>
<Body>
<Div class = "first"> welcome to the customer's house </div>
<Div class = "second"> welcome to </div>
<Button id = "btn1"> execute the first animation </button>
<Button id = "btn2"> execute the second animation </button>
</Body>
</Html>
You can compare the effects of joining an animation queue or not joining an animation queue.
I hope this article will help you with jQuery programming.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
