jQueryのドロップダウンメニューについて

質問

jQueryを勉強しながらいろいろと実装してみているのですが、わからないことが出てきたので質問させていただきます。

今、ドロップダウンメニューを付けていて、とりあえず形にはなり、動作もしています。

ただ、ナビにカーソルかざしたときにペロンっと出てくるのはいいのですが、何度もカーソルをかざすと、その後かざした分だけ勝手にペロンペロンしてしまいます。

かざした時だけ現れるようにするには、どうすればいいのでしょうか？

現状のjavascriptの部分は以下のように記述しています。

$(document).ready(function () {
$('#nav li').hover(
function () {
$('ul', this).slideDown(500);
},
function () {
$('ul', this).slideUp(500);
}
);
});

回答No.1

fujillin · ベストアンサー

回答がないみたいなので…

原因としては、ドロップダウンのアニメーションに若干の時間（0.5sec）がかかるので、その間にイベントが沢山発生すると、要素のキューに登録されて、順番に処理されることになります。
そのため、発生とはタイミングがずれてアニメーションが起こるようになってしまうのでしょう。

対策としてはいくつか考えられますが、とりあえず、イベントが発生した時に対象要素がアニメーションしていたら、中止して新しいアニメーションを始めるというのではいかがでしょうか？
stop()を用いればよいのですが、そのままだと後の動作に都合が悪くなるので、アニメーションを中止して最後まで行った状態にしてしまうことにして

$('#nav li').hover(
function () {
$('ul', this).stop(1, 1).slideDown(500);
},
function () {
$('ul', this).stop(1, 1).slideUp(500);
}
);

とかではどうでしょうか。
実際の動作は、実は少々不自然なのですが、アニメーションの時間が短いのであまり気にならないのではないかと思います。