jquery: ошибка в анимации mouseenter () mouseleave () - PullRequest
Новая
       7

jquery: ошибка в анимации mouseenter () mouseleave ()

0 голосов
/ 18 февраля 2012

Я пытаюсь создать вертикальное меню прокрутки на боковой панели страницы с помощью 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>

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

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

Ответы [ 2 ]

2 голосов
/ 18 февраля 2012

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

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

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

0 голосов
/ 18 февраля 2012
Функция

вместо mouseenter и mouseleave позволяет использовать элегантную функцию hover. 

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

вот официальная документация с примером

...