jQueryのアニメーションを止めるには？

jQueryでは、animateメソッドを使って要素をスムーズに動かすアニメーションを実装できます。しかし、アニメーション中に動きを停止したい場合があります。例えば、ユーザーが「停止」ボタンをクリックしたときや、特定の条件が満たされたときなどです。

この記事では、jQueryのアニメーションを停止する方法について解説します。

アニメーションを途中で停止する

jQueryで実行中のアニメーションを停止するには、stop() メソッドを使用します。

stop() メソッドの基本的な使い方

stop() メソッドは、実行中のアニメーションをただちに停止します。例えば、以下のコードでは、赤い四角が右に移動するアニメーションを実行していますが、「停止」ボタンをクリックするとアニメーションが停止します。


<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
}
</style>
</head>
<body>

<button id="start">開始</button>
<button id="stop">停止</button>
<div class="box"></div>

<script>
$(document).ready(function(){
  $("#start").click(function(){
    $(".box").animate({left: "500px"}, 5000);
  });
  $("#stop").click(function(){
    $(".box").stop();
  });
});
</script>

</body>
</html>

stop() メソッドの引数

stop() メソッドには、オプションとして2つの引数を指定できます。

引数	説明
clearQueue	`true` を指定すると、キューに溜まっているアニメーションをクリアします。デフォルトは `false` です。
jumpToEnd	`true` を指定すると、アニメーションを最終状態までジャンプさせます。デフォルトは `false` です。

例えば、stop(true, true) と指定すると、キューに溜まっているアニメーションをクリアし、現在のアニメーションを最終状態までジャンプさせます。

アニメーションキュー

jQueryでは、複数のアニメーションを同時に実行することはできません。代わりに、アニメーションはキューに登録され、順番に実行されます。例えば、以下のコードでは、赤い四角が右に移動した後、下に移動します。


<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
}
</style>
</head>
<body>

<button id="start">開始</button>
<div class="box"></div>

<script>
$(document).ready(function(){
  $("#start").click(function(){
    $(".box").animate({left: "500px"}, 2000)
             .animate({top: "300px"}, 2000);
  });
});
</script>

</body>
</html>

このように、jQueryのアニメーションはキューによって管理されます。 stop() メソッドを使うと、このキューを操作することができます。

参考資料

* jQuery.stop() | jQuery API Documentation

よくある質問

Q1: stop() メソッドを使ってもアニメーションが停止しません。

A1: 考えられる原因としては、以下の点が挙げられます。

stop() メソッドを呼び出しているタイミングが間違っている可能性があります。アニメーションが開始される前にstop() メソッドを呼び出しても、アニメーションは停止しません。
別のJavaScriptライブラリがjQueryと競合している可能性があります。他のライブラリを無効化するか、stop() メソッドの呼び出しにjQuery.noConflict() を使用してみてください。

Q2: アニメーションを一時停止して、再開するにはどうすればよいですか？

A2: jQueryには、アニメーションを一時停止するための組み込み関数はありません。ただし、stop() メソッドを使用して現在のアニメーションを停止し、変数に現在の状態を保存することで、一時停止と再開の動作をシミュレートできます。再開するには、保存した状態からアニメーションを再開します。

Q3: 特定のアニメーションだけを停止することはできますか？

A3: はい、stop() メソッドの最初の引数にアニメーションの名前を指定することで、特定のアニメーションだけを停止することができます。アニメーションに名前を付けるには、animate() メソッドのオプションで queue プロパティを使用します。

その他の参考記事:jquery stop