JQuery Анимация Проблема

Question

Интересно, как я могу решить эту, возможно, легкую проблему.

Я установил плагин цвета для плавного изменения цвета фона.Так что, когда я наведу на него несколько раз за короткое время, он будет повторять и повторять анимацию как стек.Как я могу это исправить?Есть идеи?

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

Answer 1

Используйте stop () , чтобы остановить текущую анимацию для элемента.http://api.jquery.com/stop/

Answer 2

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