I want code in which a div fades out if mouse does not hover over it. This is the code which makes the div visible. As soon as it is displayed it fades out. I want that if a user hovers over it while it is fading out it stops fading and becoming as it was initially. And then as user hovers out of it it fades again.
$('#popuup_div').css({left:leftVal,top:topVal}).show().fadeOut(2000);
Answer 1
jQuery has a stop() function which stops all animations taking place on an element. Use it in a mouseover() event handler and you're done.
Answer 2
Check this fiddle. http://jsfiddle.net/6WMDz/1/
$('#popuup_div').on('mouseover', function() {
$(this).fadeIn();
});
I have used mouseover
to fadeIn
the div.
You can also use stop
, but it is not resetting the display to initial state.