jQuery的動畫隊列，.stop（真）

第一關 - 這裏的最終目標是創建自己的下拉菜單來學習jQuery。如果我將鼠標快速移動到導航按鈕上或離開導航按鈕，動畫隊列就會建立起來，動畫會在停止後持續幾秒鐘。我發現了幾個論壇主題，表明.stop（true）是解決jQuery動畫隊列堆積問題的方法。但是，在聲明中使用多個動畫時，它似乎無法解決我的問題。jQuery的動畫隊列，.stop（真）

下面是代碼（我省略了CSS）

<html> 
<head> 
<title>My First DropDown Menu</title> 
<script language="javascript" src="js/jquery-1.7.1.min.js"></script> 
<script language="javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script> 
<link rel="stylesheet" type="text/css" href="css/menu.css" /> 

<script language="javascript"> 
    $(document).ready(function() { 
     $("div.bSlider ul li").hover(function() { 
      $(this).stop(true, true).animate({ backgroundColor: "#898989", color: "#d01d33" }, 500, function() {}).find("ul").slideDown(200, function(){}); 
     }, function() { 
      $(this).stop(true, true).animate({ backgroundColor: "#d01d33", color: "#ffc074"}, 0, function() {}).find("ul").slideUp(100, function(){}); 
     }); 
    }); 
</script> 

</head> 

<body> 
<div class="bSlider"> 
    <ul> 
     <a href="#"><li>Menu Item #1</li></a> 
     <a href="#"><li>Menu Item #2</li></a> 
     <a href="#"><li>Menu Item #3</li></a> 
     <a href="#"><li>Menu Item #4</li></a> 
     <a href="#"><li>Menu Item #5 
      <ul> 
       <a href="#"><li>Sub-menu Item #1</li></a> 
       <a href="#"><li>Sub-menu Item #2</li></a> 
       <a href="#"><li>Sub-menu Item #3</li></a> 
       <a href="#"><li>Sub-menu Item #4</li></a> 
      </ul> 
     </li></a> 
     <a href="#"><li>Menu Item #6</li></a> 
    </ul> 
</div> 
</body> 

</html>

來源

2012-01-10 Jake

您需要添加額外的.stop(true,true)停止了slideDown /向上的一部分。

http://jsfiddle.net/Tentonaxe/kZ78R/

$(document).ready(function() { 
    $("div.bSlider ul li").hover(function() { 
     $(this).stop(true, true).animate({ backgroundColor: "#898989", color: "#d01d33" }, 500, function() {}).find("ul").stop(true,true).slideDown(200, function(){}); 
    }, function() { 
     $(this).stop(true, true).animate({ backgroundColor: "#d01d33", color: "#ffc074"}, 0, function() {}).find("ul").stop(true,true).slideUp(100, function(){}); 
    }); 
});

編輯：附加信息

你需要第二個.stop()的原因是因爲.stop()僅停止所選元素的動畫，不是的孩子。由於<ul>是所選元素的子元素，因此動畫未停止。

來源

2012-01-10 16:38:15

jQuery的動畫隊列，.stop（真）

回答

相關問題