Как предотвратить эффект моргания?

Question

[Юра Комаров]

Есть тестовый пример jquery hover color animation
https://codepen.io/Yurajun/pen/WXBpLR
При наведении все нормально отрабатывает ( цвет меняется )
Но если несколько раз быстро мышкой провести по ссылкам и убрать мышь, то ссылки будут моргать еще какое то время.
Как избавиться от этого эффекта, что бы цвет менялся только один раз.
Это просто пример, в реальной работе я не могу дотянуться до css свойства элемента у которого мне нужно изменить плавно цвет через hover and transition

Answer 1

[tyzberd]

https://codepen.io/anon/pen/POvmzb
https://api.jquery.com/stop/

Comments

[Юра Комаров]

thank you very much for your help )))

Answer 2

[ой всё]

не водите много раз, водите один раз
все события становятся в очередь и выполняют вашу анимацию - все работает корректно

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

но как вы узнаете, что, как и когда делает юзер на самом деле?

Comments

[Alexander Litvinenko]

Надо стопать предыдущую анимаю через
.stop().
если это jQuery или использовать
этот паттерн

let timeout = null;
  clearTimeout(timeout);
  timeout = setTimeout(....);

для нативного жс ну и само собой про анимейт фрейм незабыть.
ой всё людям надо пормогать, а не чсв на них свое выгружать.

Юра Комаров А вобще такие вещи лучше на CSS делать, обычный кей фрейм на ховере, и проще, и глючит меньше, и зачем визуалку в логику засовывать без необходимости?

[Юра Комаров]

обычный кей фрейм на ховере?? A если элемент не внутри блока на который делаем hover ???

[Alexander Litvinenko]

Юра Комаров, безусловно бывают такие ситуации что совсем ни как и не переверстать джае близко, в таком случае переключайте класы с заранее определенными стилями а не меняйте сами стили скриптом. такая модель более удобна и читаема, более того рекомендуема.