Как сделать hover JQuery только для текущего элемента?

Question

[Evtera]

$(".trainers__profile").hover(
    () => {
      $(event.target).find("div").animate({ opacity: 1 }, 300);
    },
    () => {
      $(event.target).find("div").animate({ opacity: 0 }, 300);
    }
  );

При наведении на столбик меняется прозрачность, но если начать водить мышкой туда-сюда, то тут появляются отличия от css hover, а именно: в css hover одновременно может работать данное свойство только на текущий элемент, а вот с JQuery начинается какая-то каша. Событие ставится в очередь и если я несколько раз проведу по ряду мышью, то текст начинает менять прозрачность поочередно столько раз, сколько я навел на столб, причём все разом.

Как сделать, чтобы hover работал только для текущего элемента, без всяких очередей в стеке вызовов и прочего?

Comments

[ThunderCat]

добавить класс?

[Evtera]

ThunderCat, я думал об этом, но может есть какой-то другой способ

Answer 1

[0xD34F]

Перед тем как запустить новую анимацию, останавливайте предыдущую:

$('.trainers__profile').on('mouseenter mouseleave', e => {
  $('div', e.currentTarget)
    .stop()
    .animate({ opacity: +(e.type === 'mouseenter') }, 300);
});