Question

Basically I want to fade out an element if after x seconds there is no mouseover event triggered. I’ve tried for a few hours and just can’t seem to write the code to work properly.

So far I’ve written –

$('.toolTip').live('mouseover', function() {
    $(this).stop(true, true).fadeIn();
});
$('.toolTip').live('mouseleave', function() {
    $(this).delay(4000).fadeOut("slow");
});

Which works if the mouse enters the div, and then leaves, but not if it doesn’t ever gain focus.

Answer 1

One way to accomplish this would be to add a fadeTo() command in addition to your mouseover events so that it initially begins fading out:

$(".toolTip").delay(1000).fadeTo(5000, 0);
$(".toolTip").on({
    mouseleave: function() {
        $(this).delay(1000).fadeTo(5000, 0);
    },
    mouseenter: function() {
        $(this).stop().fadeTo(500, 1);
    }
});

​
DEMO