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、代码

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>演示文档</title>

     <script type="text/javascript" src="jquery-3.1.1.min.js"></script>

     <style type="text/css">

         input{width: 100px;height: 30px;}

         #div1,#div2,#div3{width: 100px;height: 100px;border:1px solid green;display: inline-block;background: orange;position: absolute;left: 10px;top: 100px}

       </style>

 </head>

 <body>

     <h3>jQuery动画效果</h3>

     <input id="btn1" type="button" value="animate">

     <input id="btn2" type="button" value="队列动画1">

     <input id="btn3" type="button" value="队列动画2"><br>

         <div id="div1" style="width: 100PX;height: 100PX;background: red">jQuery动画效果</div>

     <script type="text/javascript">

     $('#btn1').click(function(){

             $('#div1').animate({

                 left:'300px',

                 top:'300px'

             },1000)

         })

     $('#btn2').click(function(){

             $('#div1').animate({

                 left:'300px'

             },1000,function(){

                 $('#div1').animate({

                     top:'300px'

                 },function(){

                     $('#div1').animate({

                         left:'50px'

                     })

                 })

             })

         })

         $('#btn3').click(function(){

             $('#div1').animate({left:'300px'})

                       .animate({top:'300px'})

                       .animate({left:'30px'})

         })

     </script>

 </body>

 </html>
 

js进阶 13-5 jquery队列动画如何实现的更多相关文章

  1. js进阶 13 jquery动画函数有哪些

    js进阶 13 jquery动画函数有哪些 一.总结 一句话总结: 二.jquery动画函数有哪些 原生JavaScript编写动画效果代码比较复杂,而且还需要考虑兼容性.通过jQuery,我们使用简 ...

  2. js进阶 13-11/12 jquery如何实现折叠导航

    js进阶 13-11/12 jquery如何实现折叠导航 一.总结 一句话总结:还是用的slideToggle滑动效果,并且这一个展开时,所有兄弟都关闭. 1.文字缩进怎么设置? 感觉设置margin ...

  3. js进阶---12-11、jquery如何给动态创建出来的元素绑定事件

    js进阶---12-11.jquery如何给动态创建出来的元素绑定事件 一.总结 一句话总结:通过事件委托的方式,通过on方法 1.on方法在事件绑定的时候,data方式带额外参数时,字符串参数和其它 ...

  4. js进阶---12-12、jquery事件委托怎么使用

    js进阶---12-12.jquery事件委托怎么使用 一.总结 一句话总结:通过on方法(事件委托),给要绑定事件的元素的祖先绑定事件,从而达到效果. 1.事件委托是什么? 通过事件冒泡,让子元素绑 ...

  5. js进阶---12-10、jquery绑定事件和解绑事件是什么

    js进阶---12-10.jquery绑定事件和解绑事件是什么 一.总结 一句话总结:on和off. 1.jquery如何给元素绑定事件? on方法 22 $('#btn1').on('click', ...

  6. js进阶 13-9/10 jquery如何实现三级列表

    js进阶 13-9/10 jquery如何实现三级列表 一.总结 一句话总结:用的是定位,父标签相对定位,子标签就可以绝对定位了,绝对定位的孩子还是可以设置绝对定位.用toggle设置子菜单显示和隐藏 ...

  7. js进阶课程 12-9 jquery的事件对象event的方法有哪些？

    js进阶课程 12-9 jquery的事件对象event的方法有哪些? 一.总结 一句话总结:三组六个,阻止默认事件一组,阻止冒泡一组,阻止冒泡和剩余事件一组. 1.事件的默认动作指什么? 比如点a标 ...

  8. js进阶 11-4/5 jquery中css的类的操作有哪些

    js进阶 11-4/5  jquery中css的类的操作有哪些 一.总结 一句话总结:jquery中css的类的操作有增删切三种. 1.jquery中css的类的操作有哪些? 增删切三种 addCla ...

  9. 第73天：jQuery基本动画总结

    一.DOM对象跟jQuery对象相互转换 jQuery对象转换成DOM对象: 方式一:$(“#btn”)[0] 方式二:$(“#btn”).get(0) DOM对象转换成jQuery对象: $(doc ...

随机推荐

  1. CentOS7 PXE安装批量安装操作系统

    1.安装相关软件 yum -y install tftp-server httpd dhcp syslinux 2.配置DHCP cp /usr/share/doc/dhcp-4.2.5/dhcpd. ...

  2. 【CS Round #37 (Div. 2 only) A】Boring Number

    [Link]:https://csacademy.com/contest/round-37/task/boring-number/ [Description] 让你找离平均数最近的一个数的下标; [S ...

  3. CodeForcesGym 100502E Opening Ceremony

    Opening Ceremony Time Limit: 5000ms Memory Limit: 524288KB This problem will be judged on CodeForces ...

  4. Activiti工作流框架学习（一）——环境的搭建和数据表的了解

    一.什么是工作流 工作流(Workflow),就是“业务过程的部分或整体在计算机应用环境下的自动化”,它主要解决的是“使在多个参与者之间按照某种预定义的规则传递文档.信息或任务的过程自动进行,从而实现 ...

  5. I帧、P帧和B帧的特点

    I帧:帧内编码帧 I帧特点: 1.它是一个全帧压缩编码帧.它将全帧图像信息进行JPEG压缩编码及传输; 2.解码时仅用I帧的数据就可重构完整图像; 3.I帧描写叙述了图像背景和运动主体的详情; 4.I ...

  6. hdu 1171 Big Event in HDU（01背包）

    代码: #include<cstdio> #include<cstring> #include<algorithm> using namespace std; in ...

  7. 知名游戏开发者称 C++ 是一种非常糟糕、可怕的语言（C++不是一门可怕的语言，可怕的是一群没有耐心的程序员来使用C++这门语言）

    抛出一个问题:C++ 真的很可怕吗? 2016 年底,C++ 之父 Bjarne Stroustrup 在一次采访中表示:”C++ 让编程专家很容易编写出复杂.高性能.低资源消耗的代码,但不足以成为广 ...

  8. 关于自定义一个上传的file按钮

    在input中html给我们一个 type  file用来做文件上传的功能,比如 但是这样的样式,实在难看,在开发的时候看了layui和bootstrap的点击上传,都很不错. 前者的调用方式和js的 ...

  9. sqlserver 小计合计总计

    SELECT CASE WHEN GROUPING(F1) = 1 THEN '总计'WHEN GROUPING(F1) = 0 AND GROUPING(F2) = 1 THEN  F1+'合计'W ...

  10. CDQZ 0003:jubeeeeeat

    0003:jubeeeeeat 查看 提交 统计 提问 总时间限制:  1000ms 内存限制:  256000kB 描述 众所周知,LZF很喜欢打一个叫Jubeat的游戏.这是个音乐游戏,游戏界面是 ...