![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
jQueryを勉強しながらいろいろと実装してみているのですが、わからないことが出てきたので質問させていただきます。
今、ドロップダウンメニューを付けていて、とりあえず形にはなり、動作もしています。
ただ、ナビにカーソルかざしたときにペロンっと出てくるのはいいのですが、何度もカーソルをかざすと、その後かざした分だけ勝手にペロンペロンしてしまいます。
かざした時だけ現れるようにするには、どうすればいいのでしょうか?
現状のjavascriptの部分は以下のように記述しています。
$(document).ready(function () {
$('#nav li').hover(
function () {
$('ul', this).slideDown(500);
},
function () {
$('ul', this).slideUp(500);
}
);
});
No.1ベストアンサー
- 回答日時:
回答がないみたいなので…
原因としては、ドロップダウンのアニメーションに若干の時間(0.5sec)がかかるので、その間にイベントが沢山発生すると、要素のキューに登録されて、順番に処理されることになります。
そのため、発生とはタイミングがずれてアニメーションが起こるようになってしまうのでしょう。
対策としてはいくつか考えられますが、とりあえず、イベントが発生した時に対象要素がアニメーションしていたら、中止して新しいアニメーションを始めるというのではいかがでしょうか?
stop()を用いればよいのですが、そのままだと後の動作に都合が悪くなるので、アニメーションを中止して最後まで行った状態にしてしまうことにして
$('#nav li').hover(
function () {
$('ul', this).stop(1, 1).slideDown(500);
},
function () {
$('ul', this).stop(1, 1).slideUp(500);
}
);
とかではどうでしょうか。
実際の動作は、実は少々不自然なのですが、アニメーションの時間が短いのであまり気にならないのではないかと思います。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript jQueryでのレスポンシブが綺麗に動かない 3 2022/06/21 11:08
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript スマフォではボタンを表示させたくない 2 2023/01/20 14:26
- PHP アコーディオンPHPが上手くいかない 3 2022/07/15 16:29
- JavaScript プラグイン無しでContactform7にdatepickerを実装 3 2022/10/25 02:18
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
idを使わずにonclickで自身の要...
-
関数でy=g(x)のgとは何の略です...
-
functionから別のfunctionを実...
-
XMLHttpRequestでキャッシュを...
-
ActiveXobjectが作成できない
-
二次元配列を使って順位をだす...
-
乗換案内 VBAで操作したい
-
javascriptの基本的なことだと...
-
window.openでタイトル名の指定
-
Boolean型配列中のTrueの有無を...
-
JavaScriptで、現在日時から100...
-
同じIDで定義した要素の配列を...
-
Googleスプレッドシートとスク...
-
DOM要素を削除しても、イベント...
-
【Tabキー】特定の範囲内だけで...
-
Javascriptで定期的にF5を押す...
-
<a>タグのテキストを取得
-
Click回数を数え、規定された回...
-
『名前空間』の意味を教えてく...
-
JavaScriptでの動的な多次元配...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
関数でy=g(x)のgとは何の略です...
-
idを使わずにonclickで自身の要...
-
functionから別のfunctionを実...
-
jslintのエラーについて質問
-
要素名がスペースを含む場合のj...
-
javascript(jQuery)でセル内...
-
ajax反映後のjqueryが動かない
-
jQueryの :not() .not() が有効...
-
getElementByIdを使用したグロ...
-
コードをスマートにさせたい。
-
クリックすると上に開くアコー...
-
jQueryの"return false"の役割...
-
jQueryが読み込めない
-
個別では動く、javascriptのエラー
-
一つのアクションで関数を二つ...
-
jqueryの変数を関数の外に出す方法
-
R言語
-
jQuery|:not(:animated)
-
即時関数でプライベート変数的...
-
スムーズに動く アニメーション...
おすすめ情報