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

一、总结

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

1、什么是队列动画？

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

2、怎么实现队列动画？

a、可以考虑用animate的动画结束函数来实现，但是这样的话太麻烦，一则嵌套容易出错，二则不适合多重队列动画
animate(params,[speed],[easing],[fn])

  1. 25     $('#btn2').click(function(){
  2. 26             $('#div1').animate({
  3. 27                 left:'300px'
  4. 28             },1000,function(){
  5. 29                 $('#div1').animate({
  6. 30                     top:'300px'
  7. 31                 },function(){
  8. 32                     $('#div1').animate({
  9. 33                         left:'50px'
  10. 34                     })
  11. 35                 })
  12. 36             })
  13. 37         })

b、直接写多个animate()就好

  1. 38         $('#btn3').click(function(){
  2. 39             $('#div1').animate({left:'300px'})
  3. 40                       .animate({top:'300px'})
  4. 41                       .animate({left:'30px'})
  5. 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.      <input id="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>
 

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. Python excel 功能扩展库 ——> openpyxl 的基本使用

    说明:本文档内容参考自 https://www.cnblogs.com/zeke-python-road/p/8986318.html (作者:关关雎鸠`)的文档 from openpyxl impo ...

  2. xadmin列表页添加自定义工具栏toolbar

    通过xadmin的Plugin实现,adminx.py中 class Link2AdminPlugin(BaseAdminPlugin): link_2_admin = False def init_ ...

  3. POJ 2533 Longest Ordered Subsequence（dp LIS）

    Language: Default Longest Ordered Subsequence Time Limit: 2000MS   Memory Limit: 65536K Total Submis ...

  4. Linq案例

    1.牛刀小试 using System; using System.Collections.Generic; using System.Linq; using System.Text; using S ...

  5. C#开发 —— 异常处理

    System.ArithmeticException 在算术运行期间发生异常 System.ArrayTypeMismatchException 存储元素的实际类型与数组的实际类型不兼容而导致存储失败 ...

  6. 2017-百度之星 初赛-B

    1001 Chess Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total ...

  7. angular路由（自带路由篇）

    一.angular路由是什么? 为了实现SPA多视图的切换的效果,其原理可简述为每个 URL 都有对应的视图和控制器.所以当我们给url后面拼上不同的参数就能通过路由实现不同视图的切换. 二.文件总览 ...

  8. VMware Vsphere 6.0安装部署 vCenter Server安装

    几个不同的组件 vCenter Server:对ESXi主机进行集中管理的服务器端软件,安装在windows server 2008R2或以上的操作系统里,通过SQL 2008R2 或以上版本的数据库 ...

  9. SSO 中间件 kisso

    SSO 中间件 kisso kisso  =  cookie sso,基于 Cookie 的 SSO 中间件.kisso 不是一套完整的登录系统, 它的定位是一把高速开发 java Web 单点登录系 ...

  10. opencv中的Java库

    opencv中有一个用Java编写的库,opencv2.4.4以上,在opencv解压包里路径:opencv/build/java/opencv.jar,再依据用户计算机位数选择,假设是32位计算机, ...