Question

嘿伙计们我正在研究一个jQuery代码片段，它假设在动画完成后从对象中删除一个类。这就是我到目前为止所做的：

$('.box').hover(function() {
        $(this).stop().addClass('active').animate({ 'margin-top': '-49px' }, 500);
    }, function() {
        $element = $(this);
        $(this).stop().animate({ 'margin-top': '0' }, 500, function() {
            $element.removeClass('active');
        });
    });

问题在于，有时当动画完成时，不会删除该类。当我在div之间移动太快时会发生这种情况。

您可以在滑块部分查看示例here滑块内有三个框，分别显示“城市”，“住宅”和“商家”。

感谢任何帮助。

PS同样的事情发生在主导航上，有时子导航只是挂在那里。以下是导航代码：

$('#navigation ul li').hover(function(){
        $("a:eq(0)", this).addClass("hover");
        $(this).find('ul:eq(0)').stop(true, true).slideToggle();
        }, function(){
            $("a:eq(0)", this).removeClass("hover");
            $(this).find('ul:eq(0)').stop(true, true).slideToggle();
        }
    );

Answer 1

将您的$element声明更改为此

var $element = $(this);

Answer 2

主要问题可能是$element是一个隐式全局变量，因此当多个.box对象同时悬停动画时，它们将在全局变量中踩到彼此的值。应该var $element = $(this)正确地使它成为局部变量。或者，正如我在下面建议的代码中所示，可以完全消除对它的需求。

此外，当动画以.stop()结束时，不会调用完成功能，所以当你走得非常快时，你很可能会停止使用.stop()的某些动画，这会导致你的完成功能没有被叫。根据情况，这可能是也可能不是问题。

您可能还想访问用于.stop()的选项，因为通常您希望至少使用.stop(true)来停止当前动画，但要将其从队列中删除以后不会采取行动。

我建议这样做：

$('.box').hover(function() {
    $(this).stop(true).addClass('active').animate({ 'margin-top': '-49px' }, 500);
}, function() {
    $(this).stop(true).animate({ 'margin-top': '0' }, 500, function() {
        $(this).removeClass('active');
    });
});

jQuery animate（）回调无法正常使用removeClass（）

2 个答案: