【jQuery】stop()でアニメーションを停止させる!

(*このページは2021年1月8日に更新されました。)

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

jQueryのstop()と指定した要素のアニメーションを停止させるメソッドであり、animate()などでアニメーション最中の要素の動きを止める際に使用することが多いです。

そして、stop()メソッドにはパラメータを設定することができ、パラメータを設定することで停止したアニメーションを途中から再開できたり、再び最初からアニメーションを開始させることができるなど様々なアニメーションの停止ができるようになります。

今回は、jQueryのstop()メソッドを使ってアニメーションを停止する方法について以下の内容で解説していきます。

⚫︎ 現在のアニメーションを停止する場合
⚫︎ 現在のアニメーションを終了する場合
⚫︎ キューをクリアする場合
⚫︎ キューのクリアを指定してアニメーションを停止する場合

ハルトさん

今回はjQueryのstop()メソッドで要素のアニメーションを停止する方法について説明していきます。

さとみさん

はい!
お願いします!

stop()とは

stop()とは指定した要素の現在動作中のアニメーション処理を全て停止するメソッドになります。

stop()の書き方

stop()の書き方は下記となります。

パラメータ

⚫︎ キュー:
停止したいアニメーションのキュー名を指定する
⚫︎ キューをクリア:
キューのアニメーションを削除するかどうかをBoolean値で指定する
初期値はfalse
⚫︎ 最後までスキップ:
現在のアニメーションをスキップするかどうかをBoolean値で指定する
初期値はfalse

stop()メソッドのパラメータにキューやキューをクリア、最後までスキップを指定することで、指定したキューを停止したり、キューのアニメーションを削除したり、アニメーションをスキップしたりして指定した要素のアニメーションを停止することができます。

アニメーションを停止するサンプルコード

アニメーションを停止するサンプルコードを紹介します。

現在のアニメーションを停止する場合

現在のアニメーションを停止する場合はstop()メソッドのパラメータのキューをクリアと最後までスキップのパラメータをどちらともfalseに指定します。

sample.html

style.css

index.js

出力結果

stop()メソッドによって、現在のアニメーションを停止することができます。
そのため、btn1のボタンを押すとアニメーションが開始されますが、アニメーション中にbtn2のボタンを押すとアニメーションが停止され、再開すると再び最初のアニメーションが始まります。

さとみさん

stop()メソッドで、要素のアニメーションを止めていますね!

ハルトさん

そうですね。
stop()メソッドをパラメータ無しで使用すると指定したセレクタの現在の要素のアニメーションを停止することができます。
その為、伸びのアニメーション中に停止すると、次の縮むアニメーションが行われます。

現在のアニメーションを終了する場合

現在のアニメーションを終了する場合はstop()メソッドのパラメータのキューをクリアをfalse最後までスキップをtrueに設定します。

sample.html

style.css

index.js

出力結果

stop()メソッドのパラメータを設定することによって、現在のアニメーションを終了することができます。
そのため、btn1のボタンを押すとアニメーションが開始されますが、アニメーション中にbtn2のボタンを押すとアニメーションがスキップされて最終的な状態になります。

さとみさん

今度は、stop()メソッドで要素のアニメーションを終了させていますね!

ハルトさん

そうですね。
stop()メソッドのパラメータのキューをクリアをfalse、最後までスキップをtrueに設定することで要素のアニメーションを終了することができます。
その為、伸びのアニメーション中に停止すると、伸びのアニメーション後になり、自動で縮むアニメーションが行われます。

キューをクリアする場合

キューをクリアする場合はstop()のパラメータにパラメータのキューをクリアをtrue最後までスキップをfalseに設定します。

sample.html

sample.html

index.js

出力結果

stop()のパラメータのキューをクリアと最後までスキップを指定することでキューをクリアすることができます。
そのため、btn1クラスのボタンを押すとアニメーションが始まりますが、アニメーション中にbtn2クラスのボタンを押すとアニメーションが停止し、再びbtn1クラスを押すと、途中からのアニメーションが再開します。

さとみさん

今度は、stop()メソッドで一度停止したアニメーションを途中から再開させていますね!

ハルトさん

そうですね。
stop()メソッドのパラメータのキューをクリアをtrueに設定することでキュー(縮むアニメーション)を削除しています。
その為、伸びているアニメーションの最中に停止するとアニメーションが止まり、再び押すと伸びるアニメーションが再開します。

キューをクリアしてアニメーションを停止する場合

キューをクリアしてアニメーションを停止する場合はstop()のパラメータのキューをクリアと最後までスキップのどちらもtrueに設定します。

sample.html

sample.html

index.js

出力結果

stop()メソッドのパラメータに関数を指定することで、キューをクリアしてアニメーションを停止することができます。
そのため、btn1クラスのボタンを押すと、アニメーションが開始され、アニメーション中にbtn2クラスのボタンを押すとアニメーションがスキップされて伸びるアニメーションの最終的な状態になります。

今回のポイント

stop()でアニメーションを停止

⚫︎ 要素のアニメーションを停止するにはjQueryのstop()メソッドを使用する

⚫︎ 現在のアニメーションを停止する場合はstop()メソッドのパラメータのキューをクリアと最後までスキップのパラメータをどちらともfalseに設定する

⚫︎ 現在のアニメーションを停止する場合はstop()メソッドのパラメータのキューをクリアと最後までスキップのパラメータをどちらともfalseに設定する

⚫︎ 現在のアニメーションを終了する場合はstop()メソッドのパラメータのキューをクリアをfalse、最後までスキップをtrueに設定する

⚫︎ キューをクリアする場合はstop()のパラメータのキューをクリアをtrue、最後までスキップをfalseに設定する

⚫︎ キューをクリアしてアニメーションを停止する場合はstop()のパラメータのキューをクリアと最後までスキップのどちらもtrueに設定する

関連記事

jQueryのanimate()メソッドでアニメーションを行う方法についてはこちらをご参考ください。

Writer

Soshi

株式会社flyhawkのSoshiです。フライテックメディア事業部でのメディア運営・ライター業務なども担当。愛機はMac Book AirとThinkPad。好きな言語:swift、JS系(Node.js等)。好きなサーバー:AWS。受託開発やプログラミングスクールの運営をしております。ご気軽にお問い合わせください。

最新の案件情報