quirky animations, jQuery bugs?

quirky animations, jQuery bugs?

Hello,

I've created a number of jQuery animations for a website that I'm creating, and I've noticed some inconsistent problems. I'm seeing a few bugs in FF, but mostly IE.

When using the show("explode") animation, the image pieces will appear as very small when the image is not cached. After reload, the animation works perfectly. I've tried preloading the image to fix this but it makes no difference.

I'm also using an animation that changes text color on rollover. If you roll the mouse over the menu items very fast, sometimes they get stuck in the middle of an animation, and you have to rollover them again to finish the sequence.

Are these just bugs that are part of the jQuery library? Can the be avoided? Am I doing anything wrong?

Here is a link that includes both relevant animations.

Here's the relevant jQuery script:

function home_page_animation(front_image, title, menu){
   var front_image_div = $(front_image);   
   var title_div = $(title);
   var menu_div = $(menu);
   
   menu_div.css({"opacity" : "0", "top" : "0"});
   title_div.css({"opacity" : "0"});
   
   front_image_div.show("explode", {}, 2500);
   title_div.animate({"opacity" : "1"}, 4500,
      function(){
         $(this).animate({ "opacity" : "0"}, 2000, function(){
            $(this).css({"display" : "none"});
            menu_div.css({ "display" : "block"});
            menu_div.animate({ "opacity" : "1", "top" : "70px" }, 2000);
         });
      }
   );
   
}


function menu_rollover(){
   $(".menu ul li a").hover( function(){
      $(this).stop().animate({
                     //   "fontSize" : "1.2em",
                        "color" : "#1D69EF"
                         }, 500);
   }, function(){
      $(this).stop().animate({
                      //  "fontSize" : "1em",
                        "color" : "white"
                         }, 500);
   });
}


BTW, when using the fontSize animation, things really go nuts in IE.