【jQuery】animate()を途中で止めるstop()の使い方

サンプル

上記のサンプルはボタン(= hover処理を行う)にマウスカーソルを高速で載せたり外したりすることを想定。

stop()の使い方
stop()なし
アニメーションは前のアニメーションが終了しないと実行されないのでアニメーションが渋滞する(= 未実行のアニメーションがqueueに溜まる)。マウスカーソルを載せる&外すのを止めた後もqueueが空になるまでアニメーションが継続する。
stop(true)
マウスカーソルを載せる(or 外す)とアニメーションがキャンセルされる(= queueが破棄されるので以降のアニメーションは実行されない)。用途にもよるかもしれないが感覚的に一番自然だと思えるのはこのパターン(だと思う)。
stop(true, true)
マウスカーソルを載せる(or 外す)とアニメーションが途中経過をすっ飛ばして最後まで飛ぶ(= animateで指定したCSSがすぐに反映される)。その後、キャンセルとなる(= queueが破棄されるので以降のアニメーションは実行されない)。

詳しくは公式ドキュメントを参照。

.stop() | jQuery API Documentatio

https://api.jquery.com/stop/

ちなみに、animate()はoptionsで”queue”を指定すればアニメーションを入れるqueueを指定できる。stop()ではその名前を指定してアニメーションを止める(= queueを破棄する)ことも可能(以下では割愛)。

ソースコード

HTML
CSS
jQuery

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です