CODEWITHSUNDEEP
javascriptjqueryhover
Jordan Parker
Jordan Parker

Reputation: 75

Fade out if mouse does not hover element

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.

Upvotes: 2

Views: 2941

Answers (2)

Alex Kalicki
Alex Kalicki

Reputation: 1533

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

Upvotes: 3

Derek Hunziker
Derek Hunziker

Reputation: 13141

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);
});​

Upvotes: 5

Related Questions