Question

好的，我的动画非常接近我想要的动画。但是我遇到了一个bug。 http://garibaldi.juggernautwebdesign.com/这是＃menu-left nav（多彩的一个）。如果你悬停，它会像预期的那样展开。如果你让它完全动画，然后将鼠标悬停在一个新元素上或将鼠标悬停在该列表项上，它就会正常关闭并打开一个新项目（如果你将鼠标悬停在一个新的列表项上）。但是，如果将鼠标悬停在列表项上，然后在有时间完全设置动画之前快速将其悬停，则会向下滑动太远。 有没有办法阻止任何动画发生，直到最初的悬停完全动画？我尝试使用队列选项，但这只是在停留时停止了任何动画。

这是我的代码：

$(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');
        });     
    }); 

});

非常感谢任何帮助！

Answer 1

您可以在调用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;
                });     
                    }
        });         

    });

另外，请尝试删除其中一个悬停处理程序代码。似乎他们互相踩着。

Answer 2

如果没有更多的测试，我无法确定，但我认为你的活动并没有像你期望的那样冒泡。当你还在徘徊/动画时，你正在添加/删除课程，所以这个过程会激活几次。

我建议重写函数来触发mouseenter / mouseleave事件，我想这可以帮助你确保事件只触发一次。您甚至不必使用此方法添加/删除类..

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

$(".slide_box").live('mouseleave', function () {
    //animate down
})

使用多个列表项悬停时jquery动画

2 个答案: