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.