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效果函数,