jquery切換效果/不會停止運行後很多hover

Question

我有一個jQuery腳本運行在懸停，切換容器div的子元素的列表上。問題是，每當你將鼠標懸停在元素上時，腳本隊列的另一個切換。

這並不是一個固有的問題，但是當我在頁面上移動太多次時，我發現它很煩人，並且必須觀察效果錯誤，以切換嘗試追蹤懸停次數。我想知道是否有辦法在釋放懸停時完全停止效果。不知道該怎麼做，但我曾嘗試將.stop（）放在我的.toggle（）腳本的前面。它在一定程度上起作用，但太刺激，無法奏效。

爲什麼動畫隊列以及如何覆蓋它？

這裏是我的代碼：

HTML：

<div class="CategoryText"> 

     <li> <span><u>Peripheral steroid injection</u></span></li> 

    <div class="CategorizedText"> 

     <ul class="Hoverlist"><li>Trigger Point Injection</li> 
           <li>Carpel tunnel injection</li> 
           <li>Tendon sheath injection</li> 
           <li>Tendon insertion site injection</li> 
           <li>Joint injection</li> 
           <li>Bursa injection</li> 
     </ul> 

    </div> 
    </div> 

JQUERY：

<script type="text/javascript"> 

$(document).ready(function() { 
$(".CategoryText").hover(function() { 
    $(this).find(".CategorizedText").slideToggle(800); 
}); 
}); 

</script> 

Answer 1

您可以使用.stop()停止以前的懸停動畫。有關更多信息，

結帳片段

$(document).ready(function() { 
 
$(".CategoryText").hover(function() { 
 
    $(this).find(".CategorizedText").stop().slideToggle(800); 
 
}); 
 
});

.CategorizedText{ 
 
    display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div class="CategoryText"> 
 

 
     <li> <span><u>Peripheral steroid injection</u></span></li> 
 

 
    <div class="CategorizedText"> 
 

 
     <ul class="Hoverlist"><li>Trigger Point Injection</li> 
 
           <li>Carpel tunnel injection</li> 
 
           <li>Tendon sheath injection</li> 
 
           <li>Tendon insertion site injection</li> 
 
           <li>Joint injection</li> 
 
           <li>Bursa injection</li> 
 
     </ul> 
 

 
    </div> 
 
    </div>