jQuery slideDown然后在计时器上滑动

我有一个简单的.slideDown函数：

 $globalTabs.find('.seeMore a').live("click", function(){ $globalTabs.find(".allTabs").slideDown('slow'); }); 

当用户点击.allTabs的时， .allTabs会执行.slideUp 。

我想要做的是，如果用户没有点击.allTabs任何.allTabs并且鼠标不再在.allTabs ，则计时器会启动等待x时间，然后执行.slideUp 。 此外，如果鼠标在.slideUp触发之前再次进入.allTabs – 则计时器停止并在鼠标移出.allTabs之外.allTabs

不知道如何接近。 任何帮助，将不胜感激。

基本标记：

 
 link 1 link 2 link 3 link 4  

和：

 
see more 

Answer 1

试试这种方式：

 $(function() { var $allTabs = $globalTabs.find(".allTabs"); var timer; $globalTabs.find('.seeMore a').live("click", function(){ $allTabs.slideDown('slow'); }); $allTabs.mouseout(function(){ timer = setTimeout(function() {$allTabs.slideUp()}, 3000); }); $allTabs.mouseover(function() { clearTimeout(timer); }); }); 

Answer 2

你可以使用setTimeout和clearTimeout函数，注意不推荐使用live方法，你可以使用on方法代替。

 var timeout; $(document).on({ mouseenter: function(){ clearTimeout(timeout) }, mouseleave: function(){ var $this = $(this) timeout = setTimeout(function(){ $this.slideUp('slow') }, 500) }, }, ".allTabs") 

小提琴

更新：

 var timeout; $(document).delegate(".allTabs", "mouseenter", function() { clearTimeout(timeout) }) $(document).delegate(".allTabs", "mouseleave", function() { var $this = $(this) timeout = setTimeout(function() { $this.slideUp('slow') }, 1000) }) 

小提琴

Answer 3

设置一个计时器，在slideup的回调和slidedown mouseout进行.allTabs 。 在.allTabs上mouseover时取消计时器。

 var $timer; function hideAllTabs() { $globalTabs.find(".allTabs").slideUp('slow'); } $globalTabs.find('.seeMore a').live("click", function(){ $globalTabs.find(".allTabs").slideDown('slow', function() { $timer = setTimeout(hideAllTabs, 1000); }); }); $globalTabs.find(".allTabs").live("mouseout",function() { $timer = setTimeout(hideAllTabs, 1000); }); $globalTabs.find(".allTabs").live("mouseover",function() { clearTimeout($timer); });