Home > Developer > JavaScript
The usage and precautions of animate in jQuery, jqueryanimate
I. animate syntax structure
animate(params,speed,callback)
Params: A ing that includes style attributes and values, such{key1:value1,key2:value2}
Speed: speed parameter [Optional]
Callback: function executed when the animation is completed [Optional]
Ii. Custom simple animation
A simple example is used to illustrate the effect of clicking a div on the page horizontally.
<Style> # cube {position: relative;/* This element cannot be moved without adding it */width: 30px; height: 30px; background: red; cursor: pointer ;} </style> <body> <div id = "cube"> </div> <script> $ (function () {$ ("# cube "). click (function () {$ (this ). animate ({left: "100px"}, 2000)}) </script>
To make the element move, you need to change the left attribute. In order to affect the attribute values of top, right, bottom, and left elements, the position of the element must be declared.
Demo Effect
3. accumulative and progressive Animation
In the previous code{left:"100px"}This attribute is used as a parameter. If it is changed{left:"+=25px"} , The effect is as follows:
Demo Effect
4. Multiple animations
Execute multiple animations at the same time
The above example is a simple animation. If you want to execute multiple animations at the same time, for example, when the element slides to the right, the height of the element is enlarged.
The Code is as follows:
$(this).animate({left:"+=25px",height:"+=20px"},1000)
Demo Effect
5. Execute multiple animations in sequence
In the above example, sliding to the right and increasing the height occur at the same time. If you want the square to slide to the right and then increase it, you only need to split the code.
As follows:
$(this).animate({left:"+=25px"},500) .animate({height:"+=20px"},500)
The execution of an animation effect such as this is sequential, called "animation queue"
Demo Effect
Vi. Comprehensive examples
Click the square to move it to the right and increase it at the same time. The opacity increases from 50% to 100%. Then it moves up and down, widening, and fades out after completion.
$("#cube").click(function(){ $(this).animate({left:"100px",height:"100px",opacity:"1"},500) .animate({top:"40px",width:"100px"},500) .fadeOut('slow') })
When multiple effects are applied to the same element, these effects can be queued in a chained manner.
Demo Effect
VII. animation callback Functions
In the above example, if you want to switch the css style (background: blue) in the last step, instead of fading out, the relevant code is as follows:
$ ("# Cube "). click (function () {$ (this ). animate ({left: "100px", height: "100px", opacity: "1"}, 500 ). animate ({top: "40px", width: "100px"}, 500 ). css ("border", "5px solid blue") // change this line })
However,css()The method is called in advance.
Demo Effect
The cause of this problem is,css()The method is executed immediately instead of being added to the animation queue. You can use the callback function to queue non-animated methods.
The correct code is as follows:
$("#cube").click(function(){ $(this).animate({left:"100px",height:"100px",opacity:"1"},500) .animate({top:"40px",width:"100px"},500,function(){ $(this).css("border","5px solid blue") }) })
Demo Effect
It is worth noting that callback applies to all jquery animation methods, suchslidDown() ,show().
Summary
The above are some usage and notes about animate in jquery. I hope the content in this article will help you in your study or work. If you have any questions, please leave a message. Thank you for your support.
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
