.mouseleave() with .delay() working together

Question

I have a list of several \'triggers\' (

s), each trigger shows a specific DIV, and each DIV has \'close\' button.

Now, I want to improve the us

Answer 1

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 2

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