动画停止和延迟
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>
以上是关于动画停止和延迟的主要内容，如果未能解决你的问题，请参考以下文章