jQuery проблема при наведении курсора слишком быстро перемещать мышь между элементами

Question

У меня на странице многократно повторяется следующий html:

<div class="outer">
    outer
    <div class="inner">
        inner
   </div>
</div>

и иметь этот JQuery:

$('.inner').hide();
$('.outer').hover(function(e) {
    $(this).children('.inner').show("slide", {
        direction: "right"
    }, 1000);
}, function(e) {
    $(this).children('.inner').hide("slide", {
        direction: "right"
    }, 1000);
});

Как вы можете видеть здесь: http://jsfiddle.net/342q3/15/ медленное перемещение мыши между элементами div (ожидание завершения анимации) обеспечивает желаемый эффект отображения только одного внутреннего элемента div за раз.

Однако, если вы быстро перемещаете мышь между элементами, все внутренние элементы остаются видимыми.

Я пытался использовать функцию stop (), но безуспешно. Как я могу помешать внутренним элементам оставаться открытыми?

Answer 1

Если вы остановите анимацию перед тем, как запустить новую (выдвигающуюся) и используете find вместо children (не знаю, почему она не работает с children), она работает так, как предполагалось:

$('.inner').hide();
$('.outer').hover(function(e) {
    $(this).find('.inner').stop(true, true).show("slide", {
        direction: "right"
    }, 1000);
}, function(e) {
    $(this).find('.inner').stop(true, true).hide("slide", {
        direction: "right"
    }, 1000);
});

http://jsfiddle.net/AVLdW/

Answer 2

Animate () - это функция, которую вы хотите, я написал свою навигационную систему, используя эту функцию, с синтаксисом такого типа:

$("your-selecter").hover(function() {   

    $(this).stop().animate({
        backgroundPosition: '0 0'
    }, 600);
    }, function() {
       $(this).stop().animate({
            backgroundPosition: '0 -100px'
       }, 600); 
    });
};

Очевидно, что вы не захотите менять позицию BG в вашей,вы бы назвали функцию слайдера там, но это такая концепция.

Answer 3

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