jQuery animate（）回调无法与removeClass（）一起正常工作_Jquery_Jquery Animate_Removeclass

jQuery animate（）回调无法与removeClass（）一起正常工作

jquery

jQuery animate（）回调无法与removeClass（）一起正常工作,jquery,jquery-animate,removeclass,Jquery,Jquery Animate,Removeclass,嘿，伙计们，我正在编写一个jQuery代码片段，假设在动画完成后从对象中删除一个类。这就是我到目前为止所做的： $('.box').hover(function() { $(this).stop().addClass('active').animate({ 'margin-top': '-49px' }, 500); }, function() { $element = $(this); $(this).stop().animate({ '

嘿，伙计们，我正在编写一个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();
        }
    );

主要问题可能是，

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