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.

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.

• javascript
• jquery
• hover

2 Answers 2

The mouseover event will never be called on the .toolTip div because fadeOut() will finish by applying display:none to the element, thus preventing you from ever mousing over it again. Instead of fadeOut(), you can use fadeTo() to change it's opacity without affecting it's display property.

$(document).on('mouseover', '.toolTip', function() {
    $(this).stop().fadeTo("fast", 1);
});

$(document).on('mouseleave', '.toolTip', function() {
    $(this).delay(4000).fadeTo("slow", 0);
});​

One way to acplish this would be to add a fadeTo() mand 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