Problem using animate on menu element

Problem using animate on menu element

Hello,

Here is my current menu : http://wir3d.net/sites/2010-04-Pro/site/_tests/menu_01.htm

As you can see, I'm trying to animate each menu element, when the mouse is over.

My current code is :
  1. $("ul.menu li").mouseenter(function() {
     $(this).animate({ backgroundColor: '#747472' }, 100)
     .animate({ backgroundColor: '#84a9de' }, 100)
     .animate({ backgroundColor: '#747472' }, 100)
     .animate({ backgroundColor: '#84a9de' }, 100);
    })
    .mouseleave(function() {
     $("ul.menu li").each(function() {
     $(this).css({ backgroundColor: '#747472' });
     }); 
    });










But sometimes, a problem occurs : if I move quickly the mouse on the menu, going over different elements quickly, elements I just left don't come back to original state, and stay to blue background.

That's why I tried to add
  1. .mouseleave(function() {
     $("ul.menu li").each(function() {
     $(this).css({ backgroundColor: '#747472' });
     }); 
    });



to my code. But that doesn't work great. And i'm sure there is a better way to do this.

And when I leave an element, I'd like the current animation to stop right now, and come back to original state.

Could someone help me do this ?