.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 a close button.

Now I want to improve usability by adding a timer / delay to the open / visible DIV, so that 3 or 5 seconds after the user has moved his mouse from the trigger, the open / visible DIV disappears.

The problem I am facing right now is that whenever I add a function with .mouseleave (), the open / visible DIV is hidden as soon as the mouse leaves the trigger zone.

However, if you remove this function, then the DIV will remain visible, and you can close it by clicking the close button.

Here is the FIDDLE / DEMO of my situation.

Any help would be greatly appreciated.

Thank.

Answer 1

Answer to

@locrizak is correct (+1). This is due to the fact that .delay()by default it sets the effect queue, but .hide()without parameters it hides the selected elements without any effect, therefore the effects queue is not involved at all.

If you want to hide without 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/

Answer 2

you will need a duration in hiding:

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

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

Update

, ?

$('.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();
    });
});

mouseleave

Answer 3

Use setTimeoutinstead delay.

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

From jQuery delay documentation:

The .delay () method is best suited for delaying between jQuery queuing effects. Because it is limited - it does not offer, for example, a way to cancel the delay..delay () is not a replacement for the native JavaScript setTimeout, which may be more suitable for certain use cases.