.finish()

http://api.jquery.com/finish/

現在実行中のアニメーションを停止し、登録されているキューを削除して、マッチしている要素の全アニメーションを完了します。

.finish( [queue ] ) 1.9追加
デモ

.finish( [queue ] ) 1.9追加

戻り値:jQuery

引数	説明
[queue]	型:`String` アニメーションを停止したいキューの名前を指定します。

.finish()が要素上で呼び出された場合、現在実行中のアニメーションと全てのアニメーションキューが即座に停止し、 CSSプロパティは目的の値にセットされます。全てのアニメーションキューは削除されます。

もし1つ目の引数が提供されていれば、その文字列に該当するキューのアニメーションのみ停止させます。

.finish()メソッドは、.stop(true, true)にキューをクリアする点、現在のアニメーションを終了値にスキップする点で類似しています。ただし、finish()メソッドは全アニメーションキューのCSSプロパティも、同様に終了値にスキップし、その点で異なります。

$.fx.offプロパティをtrueに設定することで、グローバル上でアニメーション停止させることが出来ます。これが実行されると、全てのアニメーションメソッドは、エフェクトを表示させること無く、即座に各要素を終了値の状態に設定するようになります。

デモ

実行ボタンをクリックしてアニメーションをスタートしてみてください。その後、他のボタンにて現アニメーションやキューに登録されているアニメーションに、どのような影響を与えるか確認してみてください。

<!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="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div class="box"></div>
<div id="path">
  <button id="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>