jQuery Forum

I'm having issues with the animate procedure in jQuery. I should start by saying that while I am not new to web developement and scripting, I am fairly new to jQuery so this may be fairly elementry to some of you pros out there.

Basically what I am doing is I have an image map with hot spots, when you mouse over a hot spot, another image (an enlarged version of the hot spot) appears (fading in and growing) and then disappearing on mouse out (fading out and shrinking). My problem is odd because it does not happen every time, but "sometimes" when you mouse over the first animation (grown and fade in) will run then second will run (shrink and fade out) and then repeat until you click outside of the hot spot and the popped-up image. I've noticed the problem mainly occurrs in Firefox (3.5) and rarely or never in IE (8) and Chrome (2).

    $("#L01").mouseover(function(e){
      $("#I01").animate({left: e.pageX + "px", top: e.pageY + "px"}, 1 );
      lefter = e.pageX - 50;
      toper = e.pageY - 61;
      if(lefter<10){lefter=10;}
      if(toper<10){toper=10;}
      $("#I01").animate({opacity: 'show', width: "99px", height: "123px", left: (lefter) + "px", top: (toper) + "px"}, 1500 );
    });   
    $("#I01").mouseout(function(e){
     $("#I01").animate({width: "0px", height: "0px", left: "+=50px", top: "+=61px", opacity: "hide"}, 1500 );
    });


Does anyone see a problem or know of an alternate approach? Thanks for the help.