jQuery:添加delay() 和removeClass() 后代码停止工作

Question

这是我的代码...

 $('nav ul li').hover(function() {

    $(this).addClass('hoverIn');


  },
  function() {

    $(this).addClass('hoverOut');


  });

效果很好。

但是当我添加delay()和removeClass()时它不起作用，如下......

 $('nav ul li').hover(function() {

    $(this).addClass('hoverIn').delay(800).removeClass('hoverIn');


  },
  function() {

    $(this).addClass('hoverOut').delay(800).removeClass('hoverOut');


  });

我在这里做错了什么吗？

任何帮助将不胜感激。谢谢。

Answer 1

正如其他人提到的，.removeClass() 不是动画函数，因此不受任何排队效果的影响。

最简单的解决方案是使用 .queue() 将调用插入动画队列:

$(this).addClass('hoverIn').delay(800).queue(function() {
    $(this).removeClass('hoverIn').dequeue();
});

.dequeue() 调用对于确保任何其他排队操作仍然发生非常重要。

请注意，使用动画队列还意味着您可以使用 .stop() 来取消尚未发生的操作。使用计时器会使事情变得更加复杂。

<小时/>

如果你想要真正喜欢，我刚刚淘汰的这个插件将允许你将任何任意 jQuery 函数添加到动画队列中:

(function($) {
    $.fn.queued = function() {
        var self = this;
        var func = arguments[0];
        var args = [].slice.call(arguments, 1);
        return this.queue(function() {
            $.fn[func].apply(self, args).dequeue();
        });
    }
}(jQuery));

这样，上面的行将变成:

$(this).addClass('hoverIn').delay(800).queued('removeClass', 'hoverIn');

演示地址:http://jsfiddle.net/alnitak/h5nWw/