Скрыть блок по таймауту с помощью 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 не должен запускаться, если какая-то ссылка в данный момент находится в поиске. Может быть полезно что-то вроде сброса тайм-аута, но я не понимаю, как добавить его в мой код.

Теперь, когда я наведите на ссылку и затем наведите на нее указатель, начинается тайм-аут, но если я наведите курсор на другую ссылку, когда блок виден, из-за первого таймаута блок может скрыться.

Пожалуйста, помогите.

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

});