Установка функции тайм-аута для добавления класса для Jquery при наведении

Question

Когда пользователь наводит курсор на элемент div, я добавляю один класс. После окончания наведения я удаляю первый класс и добавляю другой класс. Проблема в том, что я хочу удалить второй класс через 1,5 секунды после его добавления.

Пока мой код добавляет классы, но не выполняет функцию с таймаутом.

$('.portfolio-card').hover(function() { 
  $(this).addClass('hover') 
}, function() { 
  $(this).removeClass('hover');  
  $(this).addClass('hover-over', setTimeout(function() { 
    $(this).removeClass('hover-over'); 
  }, 1500));
})

Answer 1

Вы используете addClass() и setTimeout() не совсем правильно. Их нужно вызывать отдельно. Вам также необходимо сохранить ссылку на this во внешней области обработчика событий, поскольку в обработчике setTimeout() она будет ссылаться на window, а не на элемент, вызвавший событие.

В качестве примечания, лучше использовать селектор CSS :hover, где это возможно, вместо JS. Поэтому вы можете изменить свой код так, чтобы он просто использовал mouseleave вместо hover(). Попробуйте это:

$('.portfolio-card').on('mouseleave', function() {
  var $el = $(this).addClass('hover-over');
  setTimeout(function() {
    $el.removeClass('hover-over');
  }, 1500);
})

.portfolio-card:hover {
  color: red;
}

.hover-over {
  background-color: #CCC;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="portfolio-card">
  Hover me
</div>