グラビカ学習帳～四谷のホームページ制作会社 gravity works（グラビティ・ワークス）備忘録と知識の共有と蓄積

jQueryで開閉メニューなどを作るとき、.show() や .hide() だけでは
思い通りにならなかったのでメモ。
.slideup() や .slidedown()、.animate() でも同様です。

クリックしないタイプの開閉メニューを作るときなど、
マウスオーバー時に .show()、マウスアウト時に .hide() というように素直に作ると、
メニューの上をマウスが行ったり来たりしたときにその回数分開閉してしまいます。
マウスを止めても何度も開閉し続ける・・。
そういうとき次のようなメソッドを上手く組み合わせることで、
余計な動作をなくすことができます。


■.stop([clearQueue], [gotoEnd])

現在のアニメーションをストップさせます。
show()やhide()の前に実行することで、それまでのアニメーションを中断してから動作させることができます。

clearCueue を true にするとアニメーションがいくつも予約されている場合、それらも中断します。
gotoEnd を true にすると中断＋アニメーション完了の状態にジャンプします。
デフォルトはどちらもfalse。

（例）$(this).stop().animate( ... );

.stop()
.stop(true,false)
.stop(false,true)

■.not(':animated')

対象要素から指定した条件に合致するものを除外します。
上記のように :animated を指定すると、対象がアニメーション中の場合は処理が実行されなくなります。

（例）$(this).not(':animated').animate( ... );


そのときそのときでどう使うかは変わってきますが、上記の.stop()と.not()の使い分けや、
オーバーだけに使う、アウトだけに使うなどの組み合わせで理想の動作を実現できると思います。

・オーバーのみに .stop(true,false)