jquery addClass - 等待，延迟，速度，超时或其他

该问题已发布多次，是如何推迟addClass。jquery addClass - 等待，延迟，速度，超时或其他

我得到这个：

$("#menu ul li").hover(function(){ 
    $(this).addClass("hover"); 
},function(){ 
    $(this).removeClass("hover"); 
})

而想类似的东西，但在类500msek左右后加入。迄今为止最好的答案是使用settimeout的这一个。也许我只是需要一个工作的例子： How to wait 5 seconds with jQuery?

hooverIntent不会工作，因为它必须是一个addClass。

Br。 Anders

更新：四个很好的答案！谢谢。我不知道为什么我不认为hoverIntent会起作用，它可以像答案中看到的那样使用。其实所有的答案都可以用于每个利弊。即使必须包含另一个插件，我也会使用hoverIntent。 hoverIntent的pro是可以设置灵敏度的，所以不仅可以设置addClass的延迟，而且当鼠标位于该区域时仍会首先开始计数（或者如果敏感度被爱的话，则不然）

来源

2010-02-15 Tillebeck

为什么不能使用hoverIntent？似乎它会做只是想你想做 – PetersenDidIt

有回复你以前的帖子了不起的答案。包括如何使用jQuery来完成此任务的示例。再看看Doug Neiner的帖子。 –

这篇文章刚刚在搜索时发现，我真的试图像在示例中那样结合setTimeout。我放弃后首先做了这篇文章。当谈到JavaScript时，我并不是那种“鲨鱼”。它变得越来越好，虽然，slooowly ... – Tillebeck

我不明白为什么hoverIntent将不起作用：

$("#menu ul li").hoverIntent({  
    sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)  
    interval: 200, // number = milliseconds for onMouseOver polling interval  
    timeout: 500, // number = milliseconds delay before onMouseOut  
    over:function(){ 
     $(this).addClass("hover"); 
    }, 
    out: function(){ 
     $(this).removeClass("hover"); 
    } 
});

来源

2010-02-15 13:56:18 PetersenDidIt

你说得对。 HoverIntent将起作用。我现在使用它。灵敏度和间隔的组合是完美的，并且更有可能的是，只有在真正需要时才会执行addClass。 – Tillebeck

$("#menu ul li").hover(function(){ 
    var $this = $(this); 
    var ovt = setTimeout(function(){$this.addClass('hover'); clearTimeout(ovt);}, 500); 
},function(){ 
    var $this = $(this); 
    var out = setTimeout(function(){$this.removeClass('hover'); clearTimeout(out);}, 500); 
});

这是你在找什么？

来源

2010-02-15 13:55:24 prodigitalson

是的，确切地说。它也会起作用。由于鼠标移动的敏感度有所增加，因此会使用hoverIntent。但是，谢谢你的正确答案。 – Tillebeck

我完全同意你对HoverIntent的选择..它更通用。 – prodigitalson

像这样的事情

$(function(){ 
    $("#menu ul li").hover(function(){ 
     var elem = $(this); 
     setTimeout (function(){ 
      elem.addClass("hover"); 
     }, 1000) ; 
     },function(){ 
     var elem = $(this); 
     setTimeout (function(){ 
      elem.removeClass("hover"); 
     }, 1000) ; 
    }) 
});

来源

2010-02-15 13:56:41 rahul

离开setTimeout和hoverintent一边（虽然他们是最明显的方式去），我们不能使用空的动画回调吗？

$("#menu ul li").hover(function(){ 
    $(this).animate("",500,"",function(){$(this).addClass("hover")}; 
},function(){ 
    $(this).animate("",500,"",function(){$(this).removeClass("hover"); 
})

来源

2010-02-15 13:59:29 graphicdivine

解决问题的有趣方法。我没有测试过，但猜测它应该可以工作。我将把它另存为一段代码片段来解决这个问题。我读过jQuery 1.4中会有一个延迟函数，它应该能够替代你的动画函数 – Tillebeck

jquery addClass - 等待，延迟，速度，超时或其他

回答

相关问题