jQueryのstop()でキューを削除できる!

jQquery使いまくってますが、あるオブジェクトをanimate()させた時に、そのanimate()を何度も実行するケースがあるとおもいます。

一度きりの動作であれば問題ありませんが、mouseoverやscrollTopで動作する場合はanimate()の処理がQueueing(待ち行列)に入り、最初の処理が終われば次の処理、次、次、、、となってしまいます。

stop()の引数が重要

通常、慣例的にobject.stop().animate()と書いている方がいると思うんですが、このstopはstop(false,false)という引数を省略して書いていることになります。

個の引数については、動作検証も含めて以下のサイトがとても詳しかったのでご紹介します。

[jQuery]こんな機能があったんだ。jQuery stop() | WEBプログラム覚書

stop([clearQueue], [gotoEnd])

となっており、第一引数がclearQueue。上記でも説明した通りデフォルトがfalseなので、Queueをクリアしないがデフォルトです。これをtrueにすることですべてのQueueを削除してくれます。

第2引数はgotoEnd。これは、現在の処理を最後まで行うかどうかです。

オブジェクトがある位置まで移動し、その後次の目的の位置に移動するなど、2段階以上の位置を移動させる場合に有効ですね。

たとえば、横移動させたあとに縦移動させる場合は、横移動の最後の位置まで移動させてから縦移動しないと、終わった時の位置がずれますね。

jQueryデザインブック 仕事で絶対に使うプロのテクニック

コメントを残す

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