Hide block on timeout by jQuery

We have a block invisible by default and links. When we hover on link, its rel attribute puts to block like a text.

What I'm trying to do:

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

Here is what I'm currently have: http://jsfiddle.net/Bt3mL/1/

Everythin开发者_JAVA技巧g works, but there is a problem - fadeOut on mouseleave should not start, if some link is currently hovered. Something like timeout reset can be useful, but I don't understand how to add it to my code.

Now, when I hover a link and then unhover it, timeout begins, but if I hover on other link while block is visible, because of the first timeout block can hide.

Please help.

Clearing the timeout will fix the problem : 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);

});

try this:

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

});