「バウンス」を引き起こすサブメニューに使用されるjQuery $ .hover
-
08-07-2019 - |
質問
jQueryホバーメソッドに問題があります。
関連するJavaScriptコードは次のとおりです。
$("#navigation > li > ul").hide();
$("#navigation > li").hover(
function() {
$(this).children("ul").slideDown(125);
},
function() {
$(this).children("ul").slideUp(125);
}
);
対応するHTMLは次のとおりです。
<ul id="navigation">
<li><a href="#">Top Level Item #1</a></li>
<li>
<a href="#">Top Level Item #2</a>
<ul>
<li><a href="#">Sub-Menu Item #2-1</a></li>
<li><a href="#">Sub-Menu Item #2-2</a></li>
<li><a href="#">Sub-Menu Item #2-3</a></li>
</ul>
</li>
</ul>
トップレベルのアイテムにマウスオーバーすると、その中のサブメニュー(存在する場合)がドロップダウンして、すばやいスライド効果が現れます。問題は、「に」マウスオーバーしたときです。メニューにすばやく移動し、メニューが あるはずの場所にマウスを置いたままにします。その後、メニューは「終了」を押します。マウスオーバーアニメーションの表示と非表示状態への跳ね返り、ドロップダウンメニューがある場所からマウスを削除するまで繰り返します。
解決
mouseout
関数にチェックを追加すると役立つ場合があります:
if( !$(this).children("ul").is(":animated") ){
$(this).children("ul").slideUp(125);
}
他のヒント
要素にカーソルを合わせたユーザーの意図を検出するjQueryプラグインであるhoventIntentを使用してみてください。
http://cherne.net/brian/resources/jquery.hoverIntent.html
私はあなたの例をそれで修正しました、そして、それはずっと良く振る舞うようです。追加しました:
<script type="text/javascript" language="JavaScript" src="jquery.hoverIntent.minified.js"></script>
そしてhover()で単一行を次のように変更しました:
$("#navigation > li").hoverIntent(
バウンスさせることができず、hoverIntent動作が適用されたポップアウトメニューのように感じました。
最後に、すでに構築されたjQueryメニュープラグインのいずれかを使用してみることができます。これらのプラグインは、既にすべてのハードワークを行っているためです:)
所属していません StackOverflow