.mouseleave() with .delay() working together

Question

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

Now, I want to improve the usability by adding a timer/delay to the opened/visible DIV so that after3 or 5 seconds after the user has moved his 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 of my situation.

Any help would be greatly appreciated.

Thanks.

Answer 1

Use setTimeout instead of delay.

Working demo: http://jsfiddle.net/J7qTy/

From jQuery delay documentation:

The .delay() method is best for delaying between queued jQuery effects. Because it is limited—it doesn't, for example, offer a way to cancel the delay—.delay() is not a replacement for JavaScript's native setTimeout function, which may be more appropriate for certain use cases.

Answer 2

you need a duration in the hide:

$('.copy .wrapper').delay(3000).hide('fast');

You can take a look at the docs http://api.jquery.com/delay/

update

is this what your looking for?

$('.trigger').bind("mouseenter" , function() {    
    var id = $(this).attr("data-code"); // Get the data from the hovered element
    $('.copy .wrapper:visible').fadeOut();
    $('#' + id).stop(true, true).show(); // Toggle the correct div    
    //Close button
    $('.copy .wrapper span').click(function() {
        $('.copy .wrapper').fadeOut();
    });
});

Thats it get rid of mouseleave listener

Answer 3

@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/