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="./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()

下篇： stop()