通过jQuery隐藏超时块答案

【问题标题】：Hide block on timeout by jQuery通过jQuery隐藏超时块
【发布时间】：2011-07-15 19:01:45
【问题描述】：

我们有一个默认不可见的块和链接。当我们将鼠标悬停在链接上时，它的rel 属性会像文本一样被阻止。

我正在尝试做的事情：

If link is hovered and block is invisible {
    show block by fadeIn;
    change text inside block (get it from link's rel);
} else {
    just change text inside block (block is already visible, no fadeIn effect);
}

If link is unhovered and block is visible {
    start timeout {
        after 2 seconds hide block by fadeOut;
    }
}

这是我目前拥有的：http://jsfiddle.net/Bt3mL/1/

一切正常，但有一个问题 - 如果当前悬停某些链接，mouseleave 上的 fadeOut 不应该启动。超时重置之类的东西可能很有用，但我不明白如何将它添加到我的代码中。

现在，当我悬停一个链接然后取消悬停它时，超时开始，但是如果我在块可见时将鼠标悬停在其他链接上，因为第一个超时块可以隐藏。

请帮忙。

【问题讨论】：

标签： javascript jquery html css timeout

【解决方案1】：

清除超时将解决问题：http://jsfiddle.net/jomanlk/veufa/

var __TIMER = null;

$("a").live('mouseenter', function(){
    clearTimeout(__TIMER);
    if ($("div").css('display')=='none'){

        $("div").html($(this).attr("rel"));
        $("div").fadeIn('fast');

    } else {
        $("div").html($(this).attr("rel"));
    }

})

$("a").live('mouseleave', function(){ 

    __TIMER = setTimeout(function(){
        $("div").fadeOut('fast');
    }, 1000);

});

【讨论】：

【解决方案2】：

试试这个：

var cancelHide = false;
$("a").live('mouseenter', function(){
    cancelHide = true;
    if ($("div").css('display')=='none'){

        $("div").html($(this).attr("rel"));
        $("div").fadeIn('fast');

    } else {
        $("div").html($(this).attr("rel"));
    }

})

$("a").live('mouseleave', function(){ 
    cancelHide = false;
    setTimeout(function(){
        if(cancelHide){ return; }
        $("div").fadeOut('fast');
    }, 1000);

});

【讨论】：