あまりにも速いホバリング時にサブメニューが混在しないようにするにはどうすればいいですか？

Question

私は、このHTMLコードを持っている：

<ul class="navigation-links"> 
        <li class="link-item"> 
         <img src="images/new-menu/menu-item_04.png" width="150" height="41" alt="" /> 
         <div style="display: none" class="sub-menu"> 
          <div class="sub-col"> 
           <img src="images/new-menu/home.png" width="46" height="14" alt="" /> 
           <ul> 
            <li>item</li> 
            <li>item</li> 
            <li>item</li> 
            <li>item</li> 
            <li>item</li> 
            <li>item</li> 
           </ul> 
          </div> 
          <div class="sub-col"> 
           <img src="images/new-menu/home.png" width="46" height="14" alt="" /> 
           <ul> 
            <li>item</li> 
            <li>item</li> 
            <li>item</li> 
            <li>item</li> 
           </ul> 
          </div> 
          <div class="sub-col"> 
           <img src="images/new-menu/sataer.png" width="124" height="17" alt="" /> 
           <ul> 
            <li>item</li> 
            <li>item</li> 
            <li>item</li> 
            <li>item</li> 
           </ul> 
          </div> 
          <div class="clear"></div> 
         </div> 
        </li> 
        <li class="link-item"> 
         <img src="images/new-menu/menu-item_03.png" width="154" height="41" alt="" /> 
         <div style="display:none" class="sub-menu index-menu-col2"> 
          <div class="sub-col"> 
           <img src="images/new-menu/decor.png" width="53" height="15" alt="" /> 
           <ul> 
            <li>item</li> 
            <li>item</li> 
            <li>item</li> 
            <li>item</li> 
            <li>item</li> 
            <li>item</li> 
            <li>item</li> 
            <li>item</li> 
           </ul> 
          </div> 
          <div class="sub-col"> 
           <img src="images/new-menu/acc.png" width="94" height="15" alt="" /> 
           <ul> 
            <li>item</li> 
            <li>item</li> 
            <li>item</li> 
            <li>item</li> 
            <li>item</li> 
            <li>item</li> 
           </ul> 
          </div> 
          <div class="sub-col"> 
           <img src="images/new-menu/out-decor.png" width="120" height="17" alt="" /> 
           <ul> 
            <li>item</li> 
            <li>item</li> 
            <li>item</li> 
            <li>item</li> 
           </ul> 
          </div> 
          <div class="clear"></div> 
         </div> 
        </li> 
        <li class="link-item"> 
         <img src="images/new-menu/menu-item_02.png" width="152" height="41" alt="" /> 
         <div style="display: none" class="sub-menu index-menu-col3"> 
          <div class="sub-col"> 
           <img src="images/new-menu/lighting.png" width="35" height="16" alt="" /> 
           <ul> 
            <li>item</li> 
            <li>item</li> 
            <li>item</li> 
            <li>item</li> 
           </ul> 
          </div> 
          <div class="sub-col"> 
           <img src="images/new-menu/electric.png" width="106" height="19" alt="" /> 
           <ul> 
            <li>item</li> 
            <li>item</li> 
            <li>item</li> 
            <li>item</li> 
            <li>item</li> 
            <li>item</li> 
            <li>item</li> 
           </ul> 
          </div> 
          <div class="clear"></div> 
         </div> 
        </li> 
        <li class="link-item"><img src="images/new-menu/menu-item_01.png" width="151" height="41" alt="" /></li> 
       </ul> 

と、このJavaScriptコード：

$(document).ready(function(e) { 
$(".link-item").hover(function(e) { 
    $(this).children(".sub-menu").slideDown("slow"); 
}); 
$(".link-item").mouseleave(function(e) { 
    $(this).children(".sub-menu").slideUp("fast"); 
}); 

を}）;

このメニューはうまくいきますが、メニューバーであまりにも速くホバリングすると、各メニューがすぐに表示されて消え、非常に醜いように見えます。

解決策は、すべてのスライドアップイベントが停止するまでスライドダウンイベントを停止することだと思いますが、どのように行うのかわかりません。

他の解決策がある場合は、私はそれを試す準備ができています。

Demo Website

Answer 1

hoverIntentをご覧ください。あなたのホバーが意図的であるかどうかを確認するロジックをいくつか行います。

Answer 2

コードを変更しました。試してみてください：

$(document).ready(function(e) { 
$(".link-item").hover(function(e) { 
    $(this).children(".sub-menu").stop(true,false).slideDown("slow"); 
}); 
$(".link-item").mouseleave(function(e) { 
    $(this).children(".sub-menu").stop(true,false).slideUp("fast"); 
}); 

});