动画停止和延迟

Posted yuyujuan

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了动画停止和延迟相关的知识,希望对你有一定的参考价值。

1,停止动画

停止匹配元素正在进行的动画,需要使用stop()方法,该方法接收两个可选参数clearQueue和gotoEnd,均为布尔值,其中clearQueue代表是否要清空未执行完的动画队列,gotoEnd代表是否直接将在执行的动画跳转到末状态。

如果直接使用stop()方法,则会立即停止当前正在进行的动画,如果接下来还有动画等待继续进行,则会以当前状态开始接下来的动画。例如,为一个元素绑定鼠标事件,当用户把鼠标移入元素时会触发动画效果,而当这个动画还没结束时,用户就将光标移出这个元素,那么光标移出的动画会放进队列中,等移入动画结束后再执行,因此,当用户移入移出得过快时,会导致动画效果与光标的动作不一致,此时需要在光标的移入移出动画之前加入stop()方法,就能解决这个问题。

<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="scripts/jquery-1.3.1.js" type="text/javascript"></script>
<style type="text/css">
        #box{
            width:100px;
            height:100px;
            background-color: pink;
            border:1px solid red;
            position:relative;
        }
</style>
</head>
<body>
   <div id="box"></div>
<script type="text/javascript">
   $(function(){
       $("#box").hover(function(){
           $(this).stop().animate({height:"150px",width:"300px"},200);
       },function(){
           $(this).stop().animate({height:"50px",width:"50px"},200);
       }
       )
   })
</script>
</body>
</html>

此时,就可以进行光标移入移出动画快速切换了,但是如果我们将上面同时执行的动画换成链式的动画队列,就会出现问题。

<script type="text/javascript">
   $(function(){
       $("#box").hover(function(){
           $(this).stop().animate({height:"150px"},200)
                         .animate({width:"300px"},200);
       },function(){
           $(this).stop().animate({height:"50px"},200)
                         .animate({width:"50px"},200);
       }
       )
   })
</script>

通过前面的知识,我们知道,在动画队列中的动画是依次顺序执行的,当光标移入时,前200毫秒先执行高度变化的动画,后两百毫秒执行宽度变化的动画,整个动画需要400毫秒,如果在100毫秒时移出鼠标,会停止执行高度变化的动画,直接执行宽度变化的动画,结束后再执行移出动画,因为stop()不带参数时,只会停止正在进行的动画,这显然是不符合预期结果的,这种情况下,我们就需要使用参数了,可以将第一个参数clearQueue设置为true,让程序把当前元素接下来尚未执行完的动画队列都清空。

<script type="text/javascript">
   $(function(){
       $("#box").hover(function(){
           $(this).stop(true).animate({height:"150px"},200)
                            .animate({width:"300px"},200)
       },function(){
           $(this).stop(true).animate({height:"50px"},200)
                            .animate({width:"50px"},200)
       }
       )
   })
</script>

如果后一个动画需要基于前一个动画的末状态,而此时我们结束前一个动画还没有到达末状态,那么我们就需要使用第二参数gotoEnd,通过stop(false,true)直接让当前动画到达末状态。当然了,也可以将两个参数结合使用stop(true,true),即表示停止当前动画并直接到达当前动画的末状态。

但是需要注意的是,jQuery只能设置正在执行的动画的最终状态,而没有提供直接到达未执行动画队列最终状态的方法,例如在上面的移入动画队列中,如果在100毫秒时移出光标,可以直接让高度变化动画到达最终状态,但是此时宽度变化动画并未执行,不能到达最终状态。

2,动画状态判断

在使用animate()方法的时候,要避免动画积累而导致的动画与用户的行为不一致,当用户快速在某个元素上执行animate()动画时,就会出现动画积累,此时,我们就需要对元素是否处于动画状态进行判断了。

<script type="text/javascript">
  if(!$("#box").is(".animated")){
      //判断元素是否处于动画状态
      //如果没有处于动画状态,则添加新动画
  } 
</script>

3,延迟动画

在动画执行的过程中,如果想对动画进行延迟操作,那就可以使用delay()方法。

<script type="text/javascript">
  $(function(){
      $("#box").hover(function(){
          $(this).animate({left:"400px",height:"200px",opacity:"1"},300)
                   .delay(1000)
                 .animate({top:"200px",width:"200px"},300)
                 .delay(1000)
                 .fadeOut("slow");
      })
  })
</script>

以上是关于动画停止和延迟的主要内容,如果未能解决你的问题,请参考以下文章

jquery animate 怎么延迟执行

CSS过渡在重新启动动画之前有延迟

在给定时间后停止HTML5 Javascript动画

SwiftUI 动画:如何延迟重复动画

延迟网站页面的执行

如何停止css animation动画