JQuery animation keeps repeating

Question

I'm having problems with jQuery repeating animations, and the usual stop () recommendations don't seem to help.

I have an image. When the user mouse over the image, I would like a white, transparent overlay to slide to the right. When the user is knocked out, I want him to leave.

The code that I partially execute, but only if the user inserts and removes it on the left side of the image (that is, away from the overlay). If the user overlays over the overlay while he is displaying, this seems to be considered a mouseout event and fires an animation, which I don't want. As soon as this happens, the animation will begin to repeat.

HTML:

<img src="Crowded_bookshelf.png" height="367" width="367" id="theImage"> <div id="overlay1"></div> 

CSS:

  #theImage { border-radius: 184px; } #overlay1 { height:400px; width:240px; background-color:white; opacity:0.9; position:absolute; left:400px; top:60px; } 

jQuery:

  $('#theImage').hover( function() { $('#overlay1').animate( { left: '190px' }, 1000 ); }, function() { $('#overlay1').animate( { left: '400px' }, 1000 ); } ); 

Any help would be greatly appreciated.

Answer 1

I think the problem is that you mouse over the event on the image, so when the div overlays the image, you no longer hover over the image and then goes out and then turns on again

What you need to do is put both of these divs in the div container, and then apply the mouse event to this

i.e.

 <div id="container"> <img src="Crowded_bookshelf.png" height="367" width="367" id="theImage"> <div id="overlay1"></div> </div> 

and

 $('#container').hover(...);