动画停止和延迟

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>

1，停止动画

2，动画状态判断

3，延迟动画

猜你喜欢