动画队列可以说是动画执行的一个顺序机制,当我们对一个对象添加多次动画效果时后,添加的动作就会被放入这个动画队列中,等前面的动画完成后再开始执行。
image动画队列机制和执行顺序
- 对于一组元素上的动画效果,有如下两种情况:
- 当在一个
animate()
方法中应用多个属性时,动画是同时发生的。 - 当以链式的写法应用动画方法时,动画是按照顺序发生的。
- 对于多组元素上的动画效果,有如下情况:
- 默认情况下,动画都是同时发生的。
- 当以回调的形式应用动画方式时,动画是按照回调顺序发生的。
即参考之前的 回调同步、异步。
以上是整个动画的调度一个流程,其实都是利用队列异步的空闲然后执行同步的代码,这样在处理上是没有浪费资源的,而且精确度也是最高的。
自定义动画
当基础效果、渐变效果、滑动效果动画不能满足需求的时候,jQuery 提供了自定义动画行为的方法
.animate( properties [, duration ] [, easing ] [, complete ] )
properties
是一个 CSS属性和值 的对象,动画将根据这组对象移动。
$('#btn4').click(function(){
$('.box').animate({
left: '150px'
},1000)
.animate({
left: '150px',
top: '150px'
},1000)
.animate({
left: '0',
top: '150px'
},1000)
.animate({
left: '0',
top: '0'
},1000)
})
.clearQueue()
清除 动画队列 中未执行的动画
.stop( [clearQueue ] [, jumpToEnd ] )
停止当前正在运行的动画
里面的参数
- clearQueue:即是
.clearQueue()
方法,决定是否清楚 动画队列 中未执行的动画 - jumpToEnd:即是决定是否展示当前一帧动画是否执行到最后
这两个参数默认都为false
即.stop()
等同于.stop(false,false)
.stop(false,false)
动画序列中共有 4 个序列,当执行到 动画序列2 的时候 使用.stop()
,序列2 立即停止,并执行 动画序列3 ,执行完之后,执行动画序列4。
.stop(true,false)
动画序列中共有 4 个序列,当执行到 动画序列2 的时候 使用.stop(true,false)
,序列2 立即停止,由于参数 [clearQueue]
是 true
因此后面的也动画序列也全部清空,不会再往下执行动画序列。因此动画会停留在 动画序列2 .stop(true,false)
的地方。
.stop(true,true)
动画序列中共有 4 个序列,当执行到 动画序列2 的时候 使用.stop(true,true)
,由于参数 [clearQueue]
是 true
因此后面的也动画序列也全部清空,不会再往下执行动画序列。由于参数 [jumpToEnd]
也是 true
,因此 最后会停留在 动画序列2 本身应该结束的位置。
.finish()
停止当前动画,并清除 动画队列 中所有未完成的动画,最终展示 动画队列 最后一帧的最终状态
image
网友评论