javascript - jQuery slideDown & 然后 slideUp 定时器

Question

我有一个简单的 .slideDown功能:

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

当用户点击 <a>在 .allTabs , .allTabs做 .slideUp .

我想做的是，如果用户没有点击 .allTabs 中的任何内容并且鼠标不再在 .allTabs 内，然后计时器开始等待 x 时间，然后执行 .slideUp .此外，如果鼠标输入 .allTabs再次在 .slideUp 之前触发器 - 然后当鼠标移出 .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

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