jQuery自定义动画 – 停止动画stop

动画在执行过程中是允许被暂停的,当一个元素调用.stop()方法,当前正在运行的动画(如果有的话)立即停止

语法:

.stop( [clearQueue ] [, jumpToEnd ] )
.stop( [queue ] [, clearQueue ] [, jumpToEnd ] )

stop还有几个可选的参数,简单来说可以这3种情况

  • .stop(); 停止当前动画,点击在暂停处继续开始
  • .stop(true); 如果同一元素调用多个动画方法,尚未被执行的动画被放置在元素的效果队列中。这些动画不会开始,直到第一个完成。当调用.stop()的时候,队列中的下一个动画立即开始。如果clearQueue参数提供true值,那么在队列中的动画其余被删除并永远不会运行
  • .stop(true,true); 当前动画将停止,但该元素上的 CSS 属性会被立刻修改成动画的目标值

简单的说:参考下面代码、

$("#aaron").animate({
height: 300
}, 5000)
$("#aaron").animate({
width: 300
}, 5000)
$("#aaron").animate({
opacity: 0.6
}, 2000)
  1. stop():只会停止第一个动画,第二个第三个继续
  2. stop(true):停止第一个、第二个和第三个动画
  3. stop(true ture):停止动画,直接跳到第一个动画的最终状态

值得注意的问题:

  • 如果动画未完成停止了,那么动画完成时执行的回调函数是不会被调用的

发表评论

电子邮件地址不会被公开。 必填项已用*标注