Как запретить повторную анимацию? jquery

Вроде все происходит нормально, но если проводить мышкой по элементу быстро вверх и вниз, анимация будет повторятся столько раз, сколько вы провели мышкой вверх и вниз.

Что делать?

в jQuery есть такое понятие, как очередь. В очереди помещаются все анимационные эффекты, которые должны произведены на странице. Вот и получается, если наводить три раза мышь, то в очередь записывается, что эффект выполняется три раза последовательно, друг за другом. тут два пути выхода:

1. воспользоваться методом stop(). у него есть два параметра первый - clearQueue(необязательный). если он имеет true, очищается очередь от всех анимационных эффектов. и второй параметр gotoEnd (необязательный) - доводит текущий анимационный эффект до конца, после чего вся очередь очищается. для Вашего случая, мне кажется подойдёт stop(false, true).
2. и второй, более элегантный способ! есть метод .queue(), который позволяет создавать свои очереди и изменять уже существующие. Есть метод .dequeue(), который позволяет очищать наши (и не только очереди). Как я уже говорил Ваши анимационные эффекты записываются в очередь. Во внутреннюю очередь jQuery, носящую имя fx. следовательно, именно эту очередь нам и надо очистить. Вот и получаем, что сначала Вам надо добавить в очередь действие, а затем его удалить оттуда.

Значит решение достаточно простое. Если предыдущий эффект не был закончен до наступления нового события наведения - доводим предыдущий эффект до конца, а очередь очищаем. С анимационным эффектом поступаем так: помещаем его в очередь fx, делаем необходимые действия, затем удаляем его из очереди .dequeue('fx'). Этими шагами Вы добьётесь, что очередь всегда будет пуста.

Пример

$(function(){
    $('#navigation-text-menu ul li a').hover(function(){
        $(this)
        .stop(true)
        .queue('fx', 
          function(){
            $(this)
             .css({'backgroundColor': '#165b95'})
             .animate({paddingLeft: '50px'}, 500)
             .dequeue('fx');
        });
    }, function(){
        $(this)
        .stop(true)
        .queue('fx',
          function(){
            $(this)
             .css({'backgroundColor': '#2b2a2a'})
             .animate({paddingLeft: '0px' }, 500)
             .dequeue('fx');
        });
    });
});

Отмена выполнения всех анимаций

Установив это свойство в true, вы отключите все анимации, которые можно выполнять с помощью jQuery. Для того, что бы анимации заработали вновь, необходимо установить это свойство обратно в false.

Простой пример:

jQuery.fx.off = true;
$('#foo').slideUp().fadeIn(); // вызов этих, и всех последующих анимаций ни к чему не приведет