2

这是我的代码...

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


  });

我在这里做错了吗？

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

4

3 回答 3

5

.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);
 });
于 2012-06-10T22:56:11.267 回答
5

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

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

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

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

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

If you want to get really fancy, this plugin I just knocked out will allow you to add any arbitrary jQuery function into the animation queue:

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

with this, the line above would become:

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

demo at http://jsfiddle.net/alnitak/h5nWw/

于 2012-06-10T23:09:32.697 回答
1

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");
    }
});
于 2012-06-10T23:00:04.420 回答