CODEWITHSUNDEEP
jquery
Nick Kahn
Nick Kahn

Reputation: 20078

Halt closing the div; if hover over it

as shown below, if the user hover over the div then how to halt the fade out div? and if the is not hover the div then fadeout whatever the time is set to.?

below is the code i am using....for fadein and fadeout:

 $("#success").fadeOut('slow');
 $("#success").fadeIn('slow');
 $("#success").fadeTo(5000, 1).fadeOut(2000);

my div:

<div class="success"><a href="#" class="close">&times;</a>status message here...</div>

i tried this:

if ($('#success').is(':hover')) { //dont close me and reset the time ...}

result: enter image description here

Upvotes: 3

Views: 117

Answers (1)

Brandon J. Boone
Brandon J. Boone

Reputation: 16472

Something like this? http://jsfiddle.net/krmNY/1/

JS

var $msg = $('#dvFadeMsg'); 
var timer = null; 

function StartFadeTimer(){
    timer = setTimeout(function(){
        $msg.fadeOut('slow');
    }, 1500); 
}

$('#dvFadeMsg').hover(function(){
    clearTimeout(timer); 
}, function(){
    StartFadeTimer(); 
});

$msg.fadeIn('slow');
StartFadeTimer();

HTML

<div id="dvFadeMsg">Fade me if no mouse</div>​

Upvotes: 2

Related Questions