Question

I have some DIV that fades in by clicking another DIV trigger element. I cannot came up with a script that will:

• On mouse leave –fade out the DIV with some delay (ex 500ms), but if one mouseover again on it before those 500ms executes – to regain somehow the element visibility.

Thanks for any advice.

Answer 1

This oughta do it for you!

Here’s a demo on JS Fiddle: http://jsfiddle.net/bCCnB/

$('#divid').mouseout(function() {
    var timeout = window.setTimeout(function() {
        $(this).hide();
    }.bind(this), 500);
    $(this).data('timeout', timeout);
});

$('#divid').mouseover(function() {
    var timeout = $(this).data('timeout');
    if (timeout) {
        window.clearInterval(timeout);
        $(this).data('timeout', null);
    }
});