Question

I have a list of several ‘triggers’ (<li>s), each trigger shows a specific div, and each div has a ‘close’ button.

Now, I want to improve the usability by adding a timer/delay to the opened/visible div so that after 3 or 5 seconds after the user has moved their mouse away from the trigger, the opened/visible div fades out.

The problem I’m having right now, is that whenever I add a function with .mouseleave(), the opened/visible div hides as soon as the mouse leaves the trigger area.

However, if you remove the function, then the div stays visible and you’re able to close it by clicking the close button.

Here’s a [FIDDLE/DEMO] 1 of my situation.

Any help would be greatly appreciated.

Thanks.

Answer 1

@locrizak’s answer is right (+1). This is because .delay() defaults to the effects queue, but .hide() with no parameters hides the selected elements without any effect, so the effects queue isn’t involved at all.

If you want to hide without any animation, just use setTimeout:

$('.trigger').mouseleave(function() {
    setTimeout(function () {
        $('.copy .wrapper').hide();
    }, 3000);
});

http://jsfiddle.net/mattball/93F3k/

---

Last edit, I promise

//Show-Hide divs
var current;
$('.trigger').live('mouseenter', function() {    
    var id = current = $(this).data('code');
    $('#' + id).show().siblings().fadeOut();
}).live('mouseleave', function() {
    var id = $(this).data('code');
    current = null;
    setTimeout(function ()
    {
        if (current !== id) $('#' + id).hide(1);
    }, 3000);
});

//Close button
$('.copy .wrapper span').live('click', function() {
    $(this).closest('.wrapper').stop(true, true).fadeOut();
});

Demo: http://jsfiddle.net/mattball/b2ew5/