js Advanced 13-5 jquery How to realize queue animation

One , summary

One sentence summary : The same jquery object , Write multiple directly animate() Just fine .

 

1, What is queue animation ?

For example, first left and then down , Instead of going down the left

 

2, How to realize queue animation ?

a, Consider using animate To achieve the end of the animation function , But that would be too much trouble , A nesting is easy to make mistakes , The other is not suitable for multi queue animation
animate(params,[speed],[easing],[fn])
25 $('#btn2').click(function(){ 26 $('#div1').animate({ 27 left:'300px' 28
},1000,function(){ 29 $('#div1').animate({ 30 top:'300px' 31 },function(){ 32
$('#div1').animate({ 33 left:'50px' 34 }) 35 }) 36 }) 37 })

b, Write multiple directly animate() Just fine
38 $('#btn3').click(function(){ 39 $('#div1').animate({left:'300px'}) 40
.animate({top:'300px'}) 41 .animate({left:'30px'}) 42 })
 

 

Two ,jquery How to realize queue animation

1, Custom animation

jQuery Animation is done by changing an attribute of an element from the " A property value " Smooth transition to the " Another property value " To achieve , Principle and principle CSS3 The principle of animation is the same .

* animate() Method execution CSS Custom animation for property sets .
grammar :animate(params,[speed],[easing],[fn])

parameter :params: A set of style attributes and their values that are animation attributes and final values

Call attention : All specified properties must be in camel form , For example marginLeft replace margin-left
 
 

2, code
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <
title> Presentation document </title> 6 <script type="text/javascript" src="jquery-3.1.1.min.js"
></script> 7 <style type="text/css"> 8 input{width: 100px;height: 30px;} 9
#div1,#div2,#div3{width: 100px;height: 100px;border:1px solid green;display:
inline-block;background: orange;position: absolute;left: 10px;top: 100px} 10 </
style> 11 </head> 12 <body> 13 <h3>jQuery Animation effect </h3> 14 <input id="btn1" type
="button" value="animate"> 15 <input id="btn2" type="button" value=" Queue animation 1"> 16 <
inputid="btn3" type="button" value=" Queue animation 2"><br> 17 <div id="div1" style="width:
100PX;height: 100PX;background: red">jQuery Animation effect </div> 18 <script type
="text/javascript"> 19 $('#btn1').click(function(){ 20 $('#div1').animate({ 21
left:'300px', 22 top:'300px' 23 },1000) 24 }) 25 $('#btn2').click(function
(){26 $('#div1').animate({ 27 left:'300px' 28 },1000,function(){ 29 $('#div1
').animate({ 30 top:'300px' 31 },function(){ 32 $('#div1').animate({ 33
left:'50px' 34 }) 35 }) 36 }) 37 }) 38 $('#btn3').click(function(){ 39 $('
#div1').animate({left:'300px'}) 40 .animate({top:'300px'}) 41 .animate({left:'
30px'}) 42 }) 43 </script> 44 45 </body> 46 </html>
 

 

 
 

Technology
©2019-2020 Toolsou All rights reserved,
elementui select obtain valueelement-ui+vue-treeselect Verification of drop down box ( Essence )2020 year 8 month 2 day TypeScript The use of generics C Language confession practice small program ( Suitable for beginners )golang One line of code converts the slice into a semicolon separated string ( Essence )2020 year 7 month 15 day Wechat applet import and include difference vue Value transfer between parent-child and non parent-child components airflow Timed tasks + Time setting +cron expression element ui Drop down box search function unity Get the car speed and forward or backward