通过jQuery隐藏超时块

Question

我们有一个默认情况下不可见的块和链接。 当我们将鼠标悬停在链接上时，其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 。 超时重置之类的东西可能有用，但是我不知道如何将其添加到我的代码中。

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

请帮忙。

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

});

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

});