js进阶 13-5 jquery队列动画如何实现

一、总结

一句话总结:同一个jquery对象,直接写多个animate()就好。

 

1、什么是队列动画?

比如说先左再下,而不是左下一起走

 

2、怎么实现队列动画?

a、可以考虑用animate的动画结束函数来实现,但是这样的话太麻烦,一则嵌套容易出错,二则不适合多重队列动画
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、直接写多个animate()就好
38 $('#btn3').click(function(){ 39 $('#div1').animate({left:'300px'}) 40
.animate({top:'300px'}) 41 .animate({left:'30px'}) 42 })
 

 

二、jquery队列动画如何实现

1、自定义动画

jQuery动画是通过将元素的某一个属性从"一个属性值"在指定时间内平滑地过渡到"另外一个属性值"来实现,原理跟CSS3动画原理是一样的。

* animate()方法执行CSS属性集的自定义动画。
语法:animate(params,[speed],[easing],[fn])

参数:params:一组包含作为动画属性和终值的样式属性和及其值的

集合注意:所有指定的属性必须用骆驼形式,比如用marginLeft代替margin-left
 
 

2、代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <
title>演示文档</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动画效果</h3> 14 <input id="btn1" type
="button" value="animate"> 15 <input id="btn2" type="button" value="队列动画1"> 16 <
inputid="btn3" type="button" value="队列动画2"><br> 17 <div id="div1" style="width:
100PX;height: 100PX;background: red">jQuery动画效果</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>
 

 

 
 

技术
©2019-2020 Toolsou All rights reserved,
Mybatis映射文件Mapper.xml中#和$的区别Keras训练数据加载实现小结科幻成真!“三体”被发现了Golang数组平分,数组拆分,数组分组LED 滚动文字(精华)2020年8月2日 TypeScript 泛型的使用[work] python读取txt文件最后一行(精华)2020年8月13日 C#基础知识点 windform实现双色球【Python】读取txt文件,获取指定行中指定位置数据mysql 修改主键