隐藏块的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/

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

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

请帮忙。

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

});