# .finish()

所属分类：特效 > 自定义 英文文档：.finish()

## .finish( [queue ] )返回: jQuery

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

- #### 添加的版本: 1.9.finish( [queue ] )

  - queue
    类型: String
    停止动画队列中的名称。

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

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

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

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

## 例子:

#### Click the Go button once to start the animation, and then click the other buttons to see how they affect the current and queued animations.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 |
    <!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://code.jquery.com/jquery-latest.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>

#### Demo: