jQuery：添加延迟（）和removeClass（）后代码停止工作答案

【问题标题】：jQuery: code stops working after adding delay() and removeClass()jQuery：添加延迟（）和removeClass（）后代码停止工作
【发布时间】：2012-09-03 01:20:59
【问题描述】：

这是我的代码...

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


  });

我在这里做错了吗？

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

【问题讨论】：

标签： jquery

【解决方案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/ 上的演示

【讨论】：

+'d 速度很快；简单的;还有我个人最喜欢的：两行代码就够了:)

【解决方案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);
  });

或者，使用一个通用函数，像这样：

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

【讨论】：

+'d，自定义函数，不错:)
恕我直言，这太复杂了。
@Alnitak - 你的队列，出队自定义功能不那么复杂吗？几乎不。两者都可以，但如果人们认为您的解决方案没有这个复杂，我会感到惊讶。
@jfriend00 我指的是您使用setTimeout 与.queue，恕我直言，这是按动画顺序运行某些内容的正确方法。 jQuery 插件后来出现...

【解决方案3】：

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

为了你的目标，我建议你使用hoverIntent plug-in：

请参阅此working Fiddle 示例！ ^{调整超时以满足您的需要}

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");
    }
});

【讨论】：