Jquery Animation Problem

I wonder how I can fix this propabably easy problem.

Ive installed the color plugin for a smooth change of the backgroundcolor. So but when Im hovering over it a few times in a short amount of time, it'll repeat and repeat t开发者_如何学Che animation like its a stack. How can I fix that? Any idea?

$("#page-bar > ul > li").mouseenter(function(){
      $(this).animate({
                    backgroundColor: "#3c78a7"
                }),500;
            }).mouseleave(function(){
                $(this).animate({
                    backgroundColor: "#333333"
                }),500;
            });

Use stop() to stop the current animation for the element. http://api.jquery.com/stop/

$("#page-bar > ul > li").mouseenter(function(){
      $(this).stop().animate({
                    backgroundColor: "#3c78a7"
                }),500;
            }).mouseleave(function(){
                $(this).stop().animate({
                    backgroundColor: "#333333"
                }),500;
            });