JQuery: ошибка в MouseEnter() MouseLeave() анимация

Question

Я пытаюсь создать вертикальное меню прокрутки в боковой панели страницы с JQuery со следующим кодом: HTML:

<ul class="side-menu"> 
<li id="menu1" ><a href="#">Item-1</a> 
    <ul class="inner-side-menu" id="menu1_inner"> 
     <li><a href="#">Sub-item</a></li> 
     <li><a href="#">Sub-item</a></li> 
     <li><a href="#">Sub-item</a></li> 
    </ul> 
</li> 
<li id="menu2"><a href="#">Item-2</a> 
    <ul class="inner-side-menu" id="menu2_inner"> 
     <li><a href="#">Sub-item</a></li> 
     <li><a href="#">Sub-item</a></li> 
     <li><a href="#">Sub-item</a></li> 
    </ul> 
</li> 
<li id="menu3"><a href="#">Item-3</a> 
    <ul class="inner-side-menu" id="menu3_inner"> 
     <li><a href="#">Sub-item</a></li> 
     <li><a href="#">Sub-item</a></li> 
     <li><a href="#">Sub-item</a></li> 
    </ul> 
</li> 
<li id="menu4"><a href="#">Item-4</a> 
    <ul class="inner-side-menu" id="menu4_inner"> 
     <li><a href="#">Sub-item</a></li> 
     <li><a href="#">Sub-item</a></li> 
     <li><a href="#">Sub-item</a></li> 
    </ul> 
</li> 

JQuery:

<script type="text/javascript"> 
$('#menu1').mouseenter(function(){ 
    $('#menu1_inner').show('slow'); 
}).mouseleave(function(){ 
    $('#menu1_inner').hide('slow'); 
}); 
//Similar for #menu2, #menu3 and #menu4 
</script> 

Я получил очень weired ошибку, в нормальном состоянии код работает хорошо, но если я взять курсор #menu1/2/3/4 и оставляет сразу, чем соответствующий #menu_inner, анимирует два или три раза, кажется, что он мультипликационный с таким же эффектом несколько раз, без ввода или ухода мыши.

Что на самом деле происходит здесь? и какое решение? p.s .: Я тестировал это в firefox 10, IE9, Maxthon 3 и Opera 11 с той же ошибкой.

Answer 1

Это происходит потому, что анимации поставлены в очередь, и они продолжают работать, если вы не решительно остановите их. Используйте метод stop, чтобы остановить предыдущие анимации.

$('#menu1').mouseenter(function(){ 
    $('#menu1_inner').stop(true, true).show('slow'); 
}).mouseleave(function(){ 
    $('#menu1_inner').stop(true, true).hide('slow'); 
}); 

stop(clearQueue, jumpToEnd) - Остановка текущего запущенного анимации на соответствующих элементов.

Answer 2

вместо mouseenter и mouseleave функция u cud использование hover функция более изящно.

$('#menu1').hover(function() 
{$(this).fadeOut(100);$(this).fadeIn(500);}); 

вот official documentation with example