jQuery Animation Queue И .stop (true)

Прежде всего, цель - создать собственное раскрывающееся меню, чтобы узнать jQuery. Если я слишком быстро передвигаю мышь и выключаю кнопки навигации, очередь анимации будет застроена, а анимация продолжится в течение нескольких секунд после остановки. Я нашел несколько тем форума, которые указывают .stop (true) - это решение проблем с наращиванием очереди очереди jQuery. Тем не менее, это не похоже на мою проблему при использовании нескольких анимаций в инструкции.jQuery Animation Queue И .stop (true)

Вот код (я опустил 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(){}); 
    }); 
});

Edit: Дополнительная информация

Причина вам нужен второй .stop().stop() потому, что только останавливает анимацию на выбранном элементе, а не его дети. Поскольку <ul> является дочерним элементом выбранного элемента, его анимация не была остановлена.

источник

2012-01-10 16:38:15

jQuery Animation Queue И .stop (true)

ответ

Смежные вопросы