Блог

У меня есть что-то вроде:

 $('.test').hover(
 function(){
  $(this).animate(...);
 }, function(){
  $(this).animate(...);
 }
);
  

Но если пользовательская мышь уходит до завершения анимации, анимация продолжается. Если я быстро и быстро наведу курсор и откреплю элемент, анимации повторяются несколько раз после того, как мышь покинула элемент. Как я могу остановить анимацию после того, как мышь покинула элемент?

Вы ищете stop():

 $('.test').hover(
 function(){
  $(this).stop(true).animate(...);
 }, function(){
  $(this).stop(true).animate(...);
 }
);
  

Есть два необязательных логических параметра. Первый clearQueue . Если установлено значение false (или опущено), это больше похоже на приостановку анимации, чем на ее остановку. В следующий раз, когда вы запустите анимацию для этого объекта, она завершит приостановленную анимацию и любые другие анимации в очереди, прежде чем продолжить. В вашем случае вы хотите, чтобы это было true , что скажет ему фактически остановить анимацию и очистить все действия в очереди.

Вторым необязательным параметром является jumpToEnd . Если false (или опущено), анимация останавливается на своих дорожках. Если true , он перейдет в состояние, в котором находится объект в конце анимации. Вы, вероятно, захотите оставить это, хотя это зависит от того, какие типы анимаций вы делаете.

Например, предположим, что вы переходите от 0% непрозрачности к 100% непрозрачности, и при вызове у вас 75% непрозрачности stop() , затем вы вызываете fade до 0% непрозрачности. Без clearQueue этого объект продолжит исчезать до 100%, а затем снова исчезнет до 0%. При clearQueue этом объект перестанет исчезать на 75%, а затем сразу же начнет исчезать до 0%. Если jumpToEnd значение true, непрозрачность объекта немедленно изменится с 75% на 100%, а затем снова уменьшится до 0%.