Question

I am sliding a div whenever there is a mouse over event and sliding it back(hiding) when there is mouse out event.
If I do too fast mouse out and mouse over, the div keeps oscillating. How do I fix this problem?

 $(document).ready(function() {
   $("#in").ready(function(){    
     $("#out").mouseover(function () {
       $("#in").animate({"height":"toggle",},200);
     });
   });
   $("#in").ready(function(){    
     $("#out").mouseout(function () {
       $("#in").animate({"height":"toggle",},200);
     });
   });
 });

---

<div id="out"><img src="pics/1.gif" ><div id="in"><h1>Google</h1></div></div>

Answer 1

you can use stop() method:

Stop the currently-running animation on the matched elements.

$("#out").mouseover(function () {
     $("#in").stop(true, true).animate({"height":"toggle"},200);
});