jQuery中的动画队列

为元素btn绑定一个动画效果,先向右移动300px,再向下移动300px,再向左移动300px,再向上移动300px,也就是回到初始位置

    $('#btn').click(function(){
      $('.box').animate({
        left: '300px'
      }, 1000)
      $('.box').animate({
        left: '300px',
        top: '300px'
      }, 1000)
      $('.box').animate({
        left: '0',
        top: '300px'
      }, 1000)
      $('.box').animate({
        left: '0',
        top: '0'
      }, 1000)
    })
动画的停止与清除
.stop( [clearQueue ] [, jumpToEnd ] ) 方法为被选元素停止当前正在运行的动画
  • clearQueue(default: false)
  • jumpToEnd(default: false)
  1. $('.box').stop()//停止当前动画
    当两个参数值都为false时,点击按钮,元素会停止当前阶段的动画直接向下一个目标位置移动,也就是说案例中的动画分为四个部分,当在执行第二段动画时点击按钮,元素会跳过第二段剩下的动画效果,直接执行第三段动画。
  2. $('.box').stop(true, false)`//停止当前动画,并清除未执行的动画队列
    当clearQueue的值为true,jumpToEnd的值为false时,点击按钮,元素会停止当前的动画并清除剩余未执行的动画队列,也就是元素停在原地不动。
  3. $('.box').stop(true, true)//停止当前动画,并清除未执行的动画队列,并且当前动画展示最终状态
    当两个参数值都为true时,点击按钮,元素会停止当前动画并清除未执行的动画队列,并直接展示当前动画最终状态。也就是说案例中的四段动画,如果在执行第二段动画时点击此按钮,元素会直接移动到(300,300)的位置并不会执行剩余的动画队列
  4. $('.box').finish()//停止当前动画,并清除未执行的动画队列,并且最后动画展示最终状态
    当使用finish()时,点击按钮,元素剩余所有动画队列(包括当前动画未执行的部分)会被清除,并且展示最后动画的最终状态,在次案例中,如果在动画执行过程中点击此按钮,元素会立刻回到动画队列的重点也就是起始位置
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 动画队列 什么是 jQuery 的动画队列?首先,我们先来了解一下什么是队列。队列是一种特殊的线性表,只允许在表的...
    饥人谷_LS阅读 3,655评论 0 1
  • 当在jQuery对象上调用动画方法时,如果对象正在执行某个动画效果,那么新调用的动画方法就会被添加到动画队列中,j...
    贪睡de狮子阅读 1,859评论 0 0
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,359评论 19 139
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 28,002评论 1 45
  • 他,或许不是最出名的歌手,或许不是唱功最好的歌手,或许不是最帅的歌手。但是,他在我心中,却是我最喜爱的歌手! 他就...
    梦幻的我阅读 4,935评论 1 3