jQuery动画队列

什么是动画队列?

jQuery动画存在一个队列, 会把事件产生的动画 放在一个队列中,当来不及执行这些事件队列的时候,会在事件结束后, 继续执行。
例如:

$box.hide(1000)
    .show(1000)
    .fadeOut()
    .fadeIn()
    .slideUp()
    .slideDown(function(){
      console.log('真的完毕了')
    })

以上动画会在队列中排布,浏览器会一个一个按顺序取出动画事件来执行。

关于动画队列的方法

  1. .clearQueue()方法被访问的时候,所有在这个列队中未执行的函数将被移除 。当不使用参数的时候,.clearQueue()会从标准的动画队列fx中移除剩下的函数。这个方法类似.stop(true)。然而.stop()方法只适用在动画中。.clearQueue()还可以用来移除用.queue()方法添加到普通jQuery列表的任何函数。
  2. .finish()方法被调用的时候,当下正在运行的动画和所有动画队列中的动画会立即停止,并且CSS属性会设置为动画最终的目标值,所有的动画队列中的动画都会被移除。
  3. .stop( [clearQueue ] [, jumpToEnd ] )停止当下正在运行的动画。方法中的两个参数中clearQueue默认值为false,它表明了方法调用时是否移除队列中待运行的动画,参数jumpToEnd默认是为false,它表明了是否立即完成当下的动画。
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 队列实现是jQuery非常棒的一个拓展,使用动画队列可以使动画更容易实现。 .animate( propertie...
    初入前端的小菜鸟阅读 287评论 0 0
  • 动画队列 队列的作用就是让我们把一个又一个的任务放到一起,确保只有当前面的任务完成了,才会开始下一个任务。这里面的...
    Hsienfeng阅读 449评论 0 0
  • 队列 队列的本质是一个数组,对队列的理解先从数组的push和shift开始。push是从数组尾端插入新的元素,sh...
    好奇男孩阅读 1,168评论 0 2
  • 当在jQuery对象上调用动画方法时,如果对象正在执行某个动画效果,那么新调用的动画方法就会被添加到动画队列中,j...
    礼知白阅读 196评论 0 0
  • 挣扎是有目标,但是没有方法,自然是无结果的能力。 奋斗是有目标,且有正确的方法,才能最终实现目标。 1、锻炼(...
    倾听的2580阅读 180评论 0 2