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):停止动画,直接跳到第一个动画的最终状态

值得注意的问题:

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

您可能对这些资源感兴趣

jQuery上卷下拉效果 – 下拉动画slideDown 对于隐藏的元素,在将其显示出来的过程中,可以对其进行一些变化的动画效果。之前学过了show方法,show方法在显示的过程...
jQuery自定义动画 – 动画animate(下) animate在执行动画中,如果需要观察动画的一些执行情况,或者在动画进行中的某一时刻进行一些其他处理,我们可以通过an...
jQuery淡入淡出效果 – 淡入淡出切换fadeToggle fadeToggle()函数用于切换所有匹配的元素,并带有淡入/淡出的过渡动画效果。之前也学过toggle、slideT...
jQuery动画基础隐藏和显示 – 隐藏元素的hide方法 让页面上的元素不可见,一般可以通过设置css的display为none属性。但是通过css直接修改是静态的布局,如果在代...
jQuery核心–去空格神器trim方法 页面中,通过input可以获取用户的输入值,例如常见的登录信息的提交处理。用户的输入不一定是标准的,输入一段密码:'  ...
jQuery淡入淡出效果 – 淡入动画fadeIn fadeOut是淡出效果,相反的还有淡入效fadeIn,方法使用上两者都是一致的,只是结果相反。 .fadeIn( ...

发表评论

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