jqueryドロップダウンメニューは、ホバー時に繰り返し開きます。

Question

jqueryメニューで少し問題があります。私はうまく動作しますが、ボタンの上に3〜4回マウスを置くと、メニューは3〜4回繰り返して展開され、終了するまで待つことができます。誰かがこれをやめる方法を教えてもらえますか？ここに私が使用しているjavascriptがあります：

<script type="text/javascript"> 
$(function() { 
     $('#dropMenu .level1 .submenu.submenu').hover(function() { 
$(this).find('ul.level2,.level3 li,.level4 li,.level5 li,.level6 li').stop(true, true).hide(1000); 
$(this).find('ul.level2,.level3 li,.level4 li,.level5 li,.level6 li').stop(true, true).show(1000); 
}, function() { 
$(this).find('ul.level2,.level3 li,.level4 li,.level5 li,.level6 li').stop(true, true).show(1000); 
$(this).find('ul.level2,.level3 li,.level4 li,.level5 li,.level6 li').stop(true, true).hide(1000); 
});}); 
</script> 

これに対する洞察は非常に認められます。

おかげ

Answer 1

あなたはアニメーションがアクティブにされていることを示す変数を追加することができますし、前の1が終了していない場合は、別の1が起動することはできません。

var isAnimating = false; 
$(function() { 
     $('#dropMenu .level1 .submenu.submenu').hover(function() { 
if (!isAnimating) { 
    $(this).find('ul.level2,.level3 li,.level4 li,.level5 li,.level6 li').stop(true, true).hide(1000); 
    $(this).find('ul.level2,.level3 li,.level4 li,.level5 li,.level6 li').stop(true, true).show(1000); 
    isAnimating = true; 
} 
}, function() { 
$(this).find('ul.level2,.level3 li,.level4 li,.level5 li,.level6 li').stop(true, true).show(1000); 
$(this).find('ul.level2,.level3 li,.level4 li,.level5 li,.level6 li').stop(true, true).hide(1000); 
isAnimating = false; 
});}); 

Answer 2

ちょっとロバート、私は単純なホバーアクションが予期しない結果を起こすと嫌いです。 時間の経過とともに、要素のフリッキングを解決するいくつかの方法を開発しました。

このようなメニュー構造があるとします。

<div id="nav"> 
    <ul> 
    <li> 
     <a href="...">Home</a> 
     <ul> 
     <li><a href="...">New Products</a></li> 
     <li><a href="...">All Products</a></li> 
     <li><a href="...">Specials</a></li> 
     <li><a href="...">Search</a> 
      <ul> 
      <li><a href="...">Site</a></li> 
      </ul> 
     </li> 
     </ul> 
    </li> 
    </ul> 
</div> 

CSSのようなものです。

<style> 
    #nav ul li ul{ 
    display:none; 
    } 
</style> 

jQueryのようなものです。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
<script> 
    $("#nav ul li").each(function(){ 
    $(this).mouseenter(function(){ 
     $(this).find("ul:first").show(); 
    }).mouseleave(function(){ 
     $(this).find("ul:first").hide(); 
    }); 
    }) 
</script> 

お知らせ、私は、この例では代わりに.hover()の.mouseenter()と.mouseexit()を使用しています。

なぜ.hover()がこの例で期待したことをしないのですか？ ホバーは1つの要素でのみ機能し、要素内の何かにカーソルを移動すると新しい要素になります。私はこれがあなたのホバーの問題をクリア願っていjQuery API Documentation

に

偉大な例です。