jquery中的animate的自定义动画中,含有动画队列的感念。将所要执行的动画按一个个的排列成一队,并先后顺序的一个个的执行。这篇文章用于讲述动画队列的大致指令及功能。
.animate
虽然只是使用.animate( properties [, duration ] [, easing ] [, complete ] )这个指令就能完成动画队列,但是其中就能衍生出无数的可能性,主要还是要靠使用者的创造力来展现不一样的动画队列。
clearQueue
清除动画队列中未执行的动画
.finish
停止当前动画,并清除动画队列中所有未完成的动画,最终展示动画队列最后一帧的最终状态
.stop( [clearQueue ] [, jumpToEnd ] )
停止当前正在运行的动画
clearQueue(default: false)
jumpToEnd(default: false)
范例:
$('#btn6').click(function(){
//停止当前动画$('.box').stop()
})
$('#btn7').click(function(){
//停止当前动画,并清除未执行的动画队列
$('.box').stop(true,false)
})
$('#btn8').click(function(){
//停止当前动画,并清除未执行的动画队列,并且当前动画展示最终状态
$('.box').stop(true,true)
})
$('#btn9').click(function(){
//停止当前动画,并清除未执行的动画队列,并且当前动画展示最终状态
$('.box').finish()
})