jquery animate при наведении курсора с несколькими элементами списка - PullRequest
Новая
       1

jquery animate при наведении курсора с несколькими элементами списка

0 голосов
/ 29 июня 2011

ОК, у меня есть желаемая анимация, очень близкая к тому, что я хочу; Однако я сталкиваюсь с ошибкой. http://garibaldi.juggernautwebdesign.com/ и это # ​​меню в левом меню (красочное). Если вы парите, он расширяется, как положено. И если вы позволите ему полностью анимировать , а затем наведите курсор мыши на новый элемент ИЛИ наведите курсор мыши на этот элемент списка, затем он должным образом закроется, и откроется новый элемент (если вы наведите курсор на новый элемент списка) , Однако, если вы наведите курсор мыши на элемент списка, а затем быстро наведите курсор мыши до того, как он успеет полностью анимироваться, тогда он опустится слишком далеко вниз. Есть ли способ остановить анимацию, пока начальное наведение не будет полностью анимированным? Я попытался использовать опцию очереди, но это просто остановило анимацию при наведении.

Вот мой код: 

$(document).ready(function() {  
    //Left nav  
    $('#menu-left').children().addClass('closed');

    $('#menu-left > li a').click(function(e){
        e.preventDefault();
    });

    $('.closed').live('hover', function() { 

        var position_open = parseInt($(this).css('bottom')) + parseInt($('.sub-menu', this).css('height')) - 12;
        $(this).animate({ bottom: position_open }, function() {
             $(this).removeClass('closed'); 
             $(this).addClass('opened');        
        });     
    }); 

    $('.opened').live('hover', function() {
        var position_close = parseInt($(this).css('bottom')) - parseInt($('.sub-menu', this).css('height')) + 12;
        $(this).animate({ bottom: position_close }, function() {
            $(this).removeClass('opened');
            $(this).addClass('closed');
        });     
    }); 

});

Любая помощь будет принята с благодарностью!

Ответы [ 2 ]

0 голосов
/ 29 июня 2011

Я не могу быть уверен без дополнительного тестирования, но держу пари, что ваши события не кипят так, как вы ожидаете. Вы добавляете / удаляете класс, пока вы все еще зависаете / анимируете, поэтому процесс запускается несколько раз.

Я бы предложил переписать функцию для запуска событий mouseenter / mouseleave, думаю, это поможет вам убедиться, что события запускаются только один раз. Возможно, вам даже не придется добавлять / удалять классы с помощью этого метода. 

$(".slide_box").live('mouseenter', function () {
    //animate up
})

$(".slide_box").live('mouseleave', function () {
    //animate down
})
0 голосов
/ 29 июня 2011

Вы можете попробовать добавить флаг перед вызовом animate.Примерно так: 

$(document).ready(function() {
var animating = false;
        //Left nav  
        $('#menu-left').children().addClass('closed');

        $('#menu-left > li a').click(function(e){
            e.preventDefault();
        });

        $('.closed').live('hover', function() { 

            var position_open = parseInt($(this).css('bottom')) + parseInt($('.sub-menu', this).css('height')) - 12;
                    if(!animating) { 
                        animating = true;
                $(this).animate({ bottom: position_open }, function() {
                 $(this).removeClass('closed'); 
                 $(this).addClass('opened');
                               animating = false;
                });     
                    }
        });         

    });

Также попробуйте удалить один из кодов обработчика наведения мыши.Кажется, они переступают друг друга.

...