隱藏塊的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); 

});