可以使用jQuery获得"mouseover for X seconds"功能吗？

Question

目前一行中有几个元素具有触发动画的mouseover事件。我的问题是，如果有人快速连续地将鼠标移到几个元素上，动画就会变得有点疯狂。

我很好奇是否有一种方法可以让mouseover事件仅在鼠标在元素上停留一定时间(例如250毫秒)时触发。这可以用jQuery完成吗?

Answer 1

我建议你使用setTimeout:

(function ($) {
    var t;
    $('ul li').hover(function() {
        var that = this;
        window.clearTimeout(t);
        t = window.setTimeout(function () {
            $(that).animate({opacity: .5}, 'slow').animate({opacity: 1});
          }, 250);
    });
}(jQuery));

如果有多个项目被快速连续激活，超时将覆盖timeout-id，从而防止第一个不应该开始动画的项目。

它不需要任何神秘的插件(尽管hoverIntent可能会提供一些不错的额外功能，你可能想要使用)和窗口。setTimeout在任何地方都支持。

我更新了代码样本来工作。我昨天从记忆中写了这个，没有得到setTimeout调用很正确。也可以参考jsFiddle。

我看到的问题是，它将执行悬停动画，即使你离开。所以你也可以添加一个$('ul').mouseleave(function() { window.clearTimeout(t) });来防止这种情况。

问候丹尼尔

Answer 2

我建议你检查一下jQuery HoverIntent插件(1.4k minified)。链接在这里:http://cherne.net/brian/resources/jquery.hoverIntent.html。这是一个很棒的插件，我已经用过很多次了!

下面是一小段代码示例:

var config = {    
     over: makeTall, // function = onMouseOver callback (REQUIRED)    
     timeout: 500, // number = milliseconds delay before onMouseOut    
     out: makeShort // function = onMouseOut callback (REQUIRED)    
};
$("#demo3 li").hoverIntent( config )

Answer 3

是:为此，在onMouseover函数中设置setTimeout，在mouseout函数中设置clearTimeout

你可能需要更多的逻辑，但这是它的螺母和螺栓

Answer 4

下面是stop()的一个例子，希望对您有所帮助:

without stop():

http://jsfiddle.net/5djzM/

使用stop()清理动画队列:

http://jsfiddle.net/KjybD/