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

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

Answer 2

正如其他人所说，.removeClass()不是动画功能，所以不受任何排队效果的影响。

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

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

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

请注意，使用动画队列还意味着如果尚未发生操作，则可以使用.stop()取消操作。使用计时器会使 lot 更复杂。

如果你想变得非常有趣，我刚淘汰的这个插件将允许你将任何任意 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 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");
    }
});

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

3 个答案: