0

嘿伙计们，我正在研究一个 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 之间移动太快时会发生这种情况。

您可以在滑块部分查看示例，滑块内有三个框，分别显示“城市”、“房屋”和“商业”。

任何帮助表示赞赏。

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

2 回答 2

3

将您的$element声明更改为此

var $element = $(this);
于 2012-03-17T14:45:35.473 回答
1

主要问题可能是它$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');
    });
});
于 2012-03-17T14:34:14.010 回答