Hello, I'm working on a navigation page where some images appear on the left / right of the text when the mouse hovers on a certain container.  It's easier to understand if you just read the short code.

1.       $("#p1Control").hover(function()
2.     {
3. $(".p1right_arrow1").animate({ opacity: 1.00 }, 500);
4. $(".p1left_arrow1").animate({ opacity: 1.00 }, 500);
5. });
6. $("#p1Icon").hover(function()
7.     {
8. $(".p1right_arrow2").animate({ opacity: 1.00 }, 500);
9. $(".p1left_arrow2").animate({ opacity: 1.00 }, 500);
10. });
12. $("#p1Control").mouseout(function()
13.     {
14. $(".p1right_arrow1").animate({ opacity: 0 }, 500);
15. $(".p1left_arrow1").animate({ opacity: 0 }, 500);
16. });
17. $("#p1Icon").mouseout(function()
18.     {
19. $(".p1right_arrow2").animate({ opacity: 0 }, 500);
20. $(".p1left_arrow2").animate({ opacity: 0 }, 500);
21. });

2. <div id="player1" class="player">
3. <p id="p1Control">
4. <img class="p1left_arrow1" src="img/left_arrow.png"></img>
5. Human
6. <img class="p1right_arrow1" src="img/right_arrow.png"></img>
7. </p>
8. <p id="p1Icon">
9. <img class="p1left_arrow2" src="img/left_arrow.png"></img>
10. Image
11. <img class="p1right_arrow2" src="img/right_arrow.png"></img>
12. </p>
13. </div>

Now, the rollovers work almost as expected.  However when I move the mouse up and down the page quickly a few times the images start to appear and disappear on their own, and they'll stop functioning properly if I put my mouse back over the container.  I am pretty sure the animations are stacking up and stopping the event handler (or whatever) from catching the hover because animations are still running.

Does anyone have any ideas?

Thanks!

Joe