ドロップリストがslideupとダウン何度も維持される

Question

jQueryのドロップダウンリストには、何回も

HTML slideupを維持し、ダウンさ：

<nav class="main-nav"> 
    <img src="img/logo.jpg"> 
    <ul class="nav-list"> 
     <li><a href="#">Home Page</a></li> 
     <li><a href="#">About us</a></li> 
     <li><a href="#">Products</a> 
      <ul class="dropdown"> 
       <li><a href="#"> Product 1</a></li> 
       <li><a href="#"> product 2</a></li> 
       <li><a href="#">product 3</a></li> 
       <li><a href="#">Product 4</a></li> 
       <li><a href="#">product 5</a></li> 
       <li><a href="#">product 6</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Career</a></li> 
     <li><a href="#">Contact us</a></li> 
    </ul> 
</nav> 

はJavaScript：

$(function() { 
    $("li").has(".dropdown").hover(
     function() { 
      $(this).find(".dropdown").slideDown(); 
     }, 
     function() { 
      $(this).find(".dropdown").slideUp(); 
     } 
    ); 
}); 

Answer 1

をあなたがProductsアイテムの上や外に素早く連続してホバーインすると、slideDownとslideUpアニメーションはキューに入れられます。新しいslideDownまたはslideUpを行う前に、現在のアニメーションをキャンセルするstop()を呼び出します。

$("li").has(".dropdown").hover(
    function() { 
     $(this).find(".dropdown").stop().slideDown(); 
    }, 
    function() { 
     $(this).find(".dropdown").stop().slideUp(); 
    } 
);