zoukankan      html  css  js  c++  java
  • 动画停止和延迟

    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","300px"},200);
           },function(){
               $(this).stop().animate({height:"50px","50px"},200);
           }
           )
       })
    </script>
    </body>
    </html>

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

    <script type="text/javascript">
       $(function(){
           $("#box").hover(function(){
               $(this).stop().animate({height:"150px"},200)
                             .animate({"300px"},200);
           },function(){
               $(this).stop().animate({height:"50px"},200)
                             .animate({"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({"300px"},200)
           },function(){
               $(this).stop(true).animate({height:"50px"},200)
                                .animate({"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","200px"},300)
                     .delay(1000)
                     .fadeOut("slow");
          })
      })
    </script>
  • 相关阅读:
    python 获取项目的根路径
    信息系统项目管理师-1.4软件工程
    信息系统项目管理师
    信息系统项目管理师-导学
    信息系统项目管理师-考试安排
    读取text行列
    pipeline基本框架思维
    Linux压缩隐藏文件
    python+appium环境搭建
    leetcode for mysql
  • 原文地址:https://www.cnblogs.com/yuyujuan/p/9503009.html
Copyright © 2011-2022 走看看