jquery动画顺序执行_JQuery动画队列详解

JQuery动画存在一个队列，当在JQuery对象上调用动画方法时，如果对象正在执行某个动画效果，那么会把后面的动画效果，放在一个队列里面，然后按顺序执行动画队列里面的每一个动画。

$box.hide(1000, function(){

$box.show(1000, function(){

$box.fadeOut('slow',function(){

$box.fadeIn('slow',function(){

$box.slideUp(function(){

$box.slideDown(function(){

console.log('动画执行完毕')

})

})

})

})

})

})

//等价于$box.hide(1000)

.show(1000)

.fadeOut()

.fadeIn()

.slideUp()

.slideDown(function(){

console.log('真的完毕了')

})

但是有时动画正在播放的时候，用户想要它停止运动，或者用户在此时已经跳转了网页，动画已经不需要再动了，此时需要对动画队列进行一些操作来满足需求。

stop([clearQueue], [jumpToEnd]);

stop()这个函数可以停止当前JQuery对象里每个DOM元素正在执行的动画。stop有两个参数，适用于所有JQuery效果函数，