jqueryのhover()でプルダウンメニューを作る

仕事でプルダウンメニューを作った際のメモ。

jqueryを使ってちょっとしたプルダウンメニューを作りました。

サンプル：jqueryのhoverでプルダウンメニュー

最初は

$('#menu').mouseover(function(){ ...処理... }).mouseout(function(){ ...処理... });

という具合に、mouseoverとmouseoutのメソッドチェーンを使ってみました。

これでも問題ないように見えましたが、実際に作ってみるとカーソルをメニュー要素からプルダウン要素に動かすと、その都度mouseoverの処理が走ってしまうということがわかりました。

ただのプルダウンメニューであれば問題ないかもしれませんが、メニューの表示にajaxでのHTTPリクエストを入れていたので、パフォーマンスの点で問題があります。というか使いものになりません。
サンプルにconsole.logを仕込んであるので、実際にマウスを動かしながらfirebugのコンソールを見ると現象がよくわかると思います。

そこで今度はhoverメソッドを使ってみたのですが、こちらはカーソルをグリグリ動かしても処理は１度しか走りませんでした。

挙動が違う理由はよくわかりませんが、とりあえずhoverを採用して無事実装完了しました。