• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • finish()

    停止当前正在运行的动画,删除所有排队的动画,并完成匹配元素所有的动画。

    .finish([queue ])
    • queue(默认:'fx')类型: String。停止动画队列中的名称。

    .finish()在一个元素上被调用,立即停止当前正在运行的动画和所有排队的动画(如果有的话),并且他们的CSS属性设置为它们的目标值(注:就是所有动画的目标值)。所有排队的动画将被删除。

    如果第一个参数提供,该字符串表示的队列中的动画将被停止。

    .finish()方法和.stop(true, true)很相似,.stop(true, true)将清除队列,并且目前的动画跳转到其最终值。但是,不同的是,.finish()会导致所有排队的动画的CSS属性跳转到他们的最终值。

    动画可能因为全局的$.fx.off属性设置为true而停止。当这样做时,所有动画方法将立即设置元素的css属性为其最终调用后的状态,而不是显示动画效果。

    例子

    单击“开始”按钮一次以开始动画,然后单击其他按钮以查看它们如何影响当前动画和排队动画。

    <!DOCTYPE html>
    <html>
    <head>
      <style>.box {
      position: absolute;
      top: 10px;
      left: 10px;
      width: 15px;
      height: 15px;
      background: black;
    }
    #path {
      height: 244px;
      font-size: 70%;
      border-left: 2px dashed red;
      border-bottom: 2px dashed green;
      border-right: 2px dashed blue;
    }
    button {
      width: 12em;
      display: block;
      text-align: left;
      margin: 0 auto;
    }
    </style>
      <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.js"></script>
    </head>
    <body>
      <div class="box"></div>
    <div id="path">
      <button id="go">Go</button>
      <br>
      <button id="bstt" class="b">.stop(true,true)</button>
      <button id="bcf" class="b">.clearQueue().finish()</button>
      <br>
      <button id="bstf" class="b">.stop(true, false)</button>
      <button id="bcs" class="b">.clearQueue().stop()</button>
      <br>
      <button id="bsff" class="b">.stop(false, false)</button>
      <button id="bs" class="b">.stop()</button>
      <br>
      <button id="bsft" class="b">.stop(false, true)</button>
      <br>
      <button id="bf" class="b">.finish()</button>
    </div>
     
    <script>
    var horiz = $("#path").width() - 20,
        vert = $("#path").height() - 20;
     
    var btns = {
      bstt: function () {
        $("div.box").stop(true, true);
      },
      bs: function () {
        $("div.box").stop();
      },
      bsft: function () {
        $("div.box").stop(false, true);
      },
      bf: function () {
        $("div.box").finish();
      },
      bcf: function () {
        $("div.box").clearQueue().finish();
      },
      bsff: function () {
        $("div.box").stop(false, false);
      },
      bstf: function () {
        $("div.box").stop(true, false);
      },
      bcs: function () {
        $("div.box").clearQueue().stop();
      }
    };
     
     
    $("button.b").on("click", function () {
      btns[this.id]();
    });
     
    $("#go").on("click", function () {
      $(".box")
        .clearQueue()
        .stop()
        .css({
        left: 10,
        top: 10
      })
        .animate({
        top: vert
      }, 3000)
        .animate({
        left: horiz
      }, 3000)
        .animate({
        top: 10
      }, 3000);
    });
    </script>
     
    </body>
    </html>
    





    上篇:delay()

    下篇:jQuery.fx.off