的jQuery了slideDown＆然后效果基本show上计时器

Question

我有一个简单.slideDown功能：

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

当用户点击在.allTabs一个<a>，.allTabs做了.slideUp。

我想要做的，就是如果.allTabs用户没有点击任何东西，鼠标内.allTabs不再，则计时器启动等待的时间x量，然后执行.slideUp。此外，如果鼠标.slideUp触发前再次进入.allTabs - 那么计时器停止并复位，当鼠标移动的.allTabs

不知道如何处理之外。任何帮助，将不胜感激。

基地标记：

<div class="allTabs"> 
    <a href="#">link 1</a> 
    <a href="#">link 2</a> 
    <a href="#">link 3</a> 
    <a href="#">link 4</a> 
</div> 

和：

<li class="seeMore"><a href="#">see more</a></li> 

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

设置一个定时器来完成slideup在slidedown的回调和对.allTabsmouseout。取消mouseover上的定时器.allTabs。

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

Answer 3

您可以使用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") 

Fiddle

更新：

var timeout; 

$(document).delegate(".allTabs", "mouseenter", function() { 
    clearTimeout(timeout) 
}) 

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

Fiddle