jQuery：添加delay（）和removeClass（）后代码停止工作

这是我的代码……

$('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/

Answer 2

.delay()仅适用于使用动画队列的jQuery方法，因此不适用于removeClass() 。

removeClass()操作仍将执行，但会立即执行，而不是在延迟时间之后执行。

所以，当你这样做时：

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

这与：

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

这与无所事事是一样的，因此你看不到效果。

---

您可以使用setTimeout()解决您的问题，如下所示：

  $('nav ul li').hover(function() { var self = $(this).addClass('hoverIn'); setTimeout(function() {self.removeClass('hoverIn');}, 800); }, function() { var self = $(this).addClass('hoverOut'); setTimeout(function() {self.removeClass('hoverOut');}, 800); }); 

---

或者，使用常见function，如下所示：

 jQuery.fn.addClassTemporary = function(cls, t) { var self = this.addClass(cls); setTimeout(function() {self.removeClass(cls);}, t); } $('nav ul li').hover(function() { $(this).addClassTemporary('hoverIn', 800); }, function() { $(this).addClassTemporary('hoverOut', 800); }); 

Answer 3

jQuery .delay（）适用于动画队列，它不像setTimeout那样充当计时器……

为了您的目标，我建议您使用hoverIntent插件 ：

看到这个工作小提琴示例！ ^{调整超时以满足您的需求}

jQuery的

 $("nav ul li").hoverIntent({ sensitivity: 1, // number = sensitivity threshold (must be 1 or higher) interval: 10, // number = milliseconds for onMouseOver polling interval timeout: 800, // number = milliseconds delay before onMouseOut over:function(){ $(this).removeClass("hoverOut").toggleClass("hoverIn"); }, out: function(){ $(this).removeClass("hoverIn").toggleClass("hoverOut"); } });