stop 用法

$(selector).stop(stopAll,goToEnd)

stopAll 可选。规定是否停止被选元素的所有加入队列的动画。
goToEnd 可选。规定是否允许完成当前的动画。该参数只能在设置了 stopAll 参数时使用。

2. 案例代码

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>stop的用法案例</title>
  <style type="text/css">
    *{
      margin: 0;
      padding: 0;
      cursor: pointer;
    }
    #start{
      margin: 20px auto;
      width: 500px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      border: 1px solid red;
    }

    .button{
      margin: 0 auto;
      width: 1000px;
      overflow: hidden;
      height: 300px;
      border: 1px solid red;
    }
    .button div{
      float: left;
      margin-left: 20px;
      width: 200px;
      height: 50px;
      line-height: 50px;
      border: 1px solid red;
      text-align: center;
    }

    #box {
      position: relative;
      margin: 20px auto;
      width: 100px;
      height: 100px;
      background: #98bf21;
    }
  </style>
</head>

<body>
  <p id="start">start</p>
  <div class="button">
    <div  id="button1" >stop() <br /> stop(false,false)</div>
    <div  id="button2" >stop(true) <br /> stop(true,false)</div>
    <div  id="button3" >stop(false,true)</div>
    <div  id="button4" >stop(true,true)</div>
  </div>
  <div id="box"></div>

  <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
  <script type="text/javascript">
    $(function () {
      function boxMes(ele){
        ele.html('width:'+ele.width()+'<br />'+'height:'+ele.height());
      }

      $("#start").click(function () {

        $("#box").stop(true,true).css({
          width: 100,
          height: 100         
        });
        $('#box').html('还原宽高100*100');

        $("#box").animate({
          width: 300,
          height: 300     
        }, 5000,function(){
          boxMes($('#box'));
        });
        $("#box").animate({
          width: 100,
          height:100     
        }, 5000,function(){
          boxMes($('#box'));
        });        
        
      });

      $('#button1').click(function () {
        $('#box').stop();
        boxMes($('#box'));
      });
      $('#button2').click(function () {
        $('#box').stop(true);
        boxMes($('#box'));
      });
      $('#button3').click(function () {
        $('#box').stop(false, true);
        boxMes($('#box'));
      });
      $('#button4').click(function () {
        $('#box').stop(true, true);
        boxMes($('#box'));
      });

    })

  </script>
</body>

</html>

View Code

3. 总结

stop 用于阻止当前动画执行及后续动画处理（当前动画必然终止，其最终状态及绑定上的后续动画是否执行取决于两个配置组合），默认配置参数为 stop(false,false) 等同于 stop()

stop(false,false) / stop() 阻止当前动画的后续执行，同时后续动画以当前状态为初始状态正常执行
stop(true,false) / stop(true) 阻止当前动画的后续执行，同时后续动画也不再执行，状态维持在此刻。

stop(false,true) 阻止当前动画的渐变执行（即一步执行到位），后，以当前动画的结尾状态为初始状态执行后续动画。
stop(true,true) 阻止当前动画的渐变执行（即一步执行到位），后，状态维持在此刻。

扫描二维码关注公众号，回复： 5912342 查看本文章

猜你喜欢