jQuery动画队列

当在jQuery对象上调用动画方法时,如果对象正在执行某个动画效果,那么新调用的动画方法就会被添加到动画队列中,jQuery会按顺序依次执行动画队列的每个动画。

动画队列机制和执行顺序

  • 对于一组元素上的动画效果,有如下两种情况:
  • 当在一个animate()方法中应用多个属性时,动画是同时发生的。
  • 当以链式的写法应用动画方法时,动画是按照顺序发生的。
  • 对于多组元素上的动画效果,有如下情况:
  • 默认情况下,动画都是同时发生的。
  • 当以回调的形式应用动画方式时,动画是按照回调顺序发生的。
    即参考之前的 回调同步、异步。

以上是整个动画的调度一个流程,其实都是利用队列异步的空闲然后执行同步的代码,这样在处理上是没有浪费资源的,而且精确度也是最高的。

动画队列操作

.clearQueue()

清除 动画队列 中未执行的动画

.finish

停止当前动画,并清除动画队列中所有未完成的动画,最终展示动画队列最后一帧的最终状态

.stop( [clearQueue ] [, jumpToEnd ] )

停止当前正在运行的动画
里面的参数
clearQueue:即是.clearQueue()方法,决定是否清除动画队列 中未执行的动画
jumpToEnd:即是决定是否展示当前一帧动画是否执行到最后
这两个参数默认都为false
.stop()等同于.stop(false,false)
.stop(false,false)//停止当前动画,立即执行队列中后面的动画
.stop(true,false)//停止当前动画,清空队列中的动画,
.stop(true,true)//停止当前动画,清空队列中的动画,展示当前动画的最终状态

建议参考:
https://www.jianshu.com/p/b37ea8301519
http://devdocs.io/jquery/stop
https://api.jquery.com/

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 队列 队列的本质是一个数组,对队列的理解先从数组的push和shift开始。push是从数组尾端插入新的元素,sh...
    好奇男孩阅读 1,167评论 0 2
  • 队列实现是jQuery非常棒的一个拓展,使用动画队列可以使动画更容易实现。 .animate( propertie...
    初入前端的小菜鸟阅读 287评论 0 0
  • 动画队列 动画队列可以说是动画执行的一个顺序机制,当我们对一个对象添加多次动画效果时后,添加的动作就会被放入这个动...
    e81bcd463937阅读 160评论 0 0
  • 动画 逐渐缩放$().show(speed,function) 显示 time是动画的时间,可以是$().hide...
    真的吗_a951阅读 174评论 0 0
  • 第一篇简书以一篇影评开始吧~ 本是图个消遣放松,但无端端却看出许多感受,也许晚上的感官比白天更敏感吧。 第一个震撼...
    Vivian_b95b阅读 96评论 0 0