Как сделать тайм-аут для функции jQuery?

Question

[Антон]

Приветствую, вот пример:

$('.class').hover(
       function(){ $(this).addClass('active') },
       function(){ $(this).removeClass('active') }
);

как сделать тайм-аут для removeClass например через 3 сек?

Answer 1

[Сергей Соколов]

Примерно так:

$('.class').hover(
  function() {
    var $el = $(this);
    $el.addClass('active');
    setTimeout(function() {
      $el.removeClass('active')
    }, 500);
  }
);

fiddle

jQuery.delay() здесь не подойдёт, т.к. он предназначен для анимаций вроде fade(), а с мгновенными методами не работает.

Comments

[Антон]

Почему-то не срабатывает даже addClass нежели removeClass

[Сергей Соколов]

Антон: да, delay() не работает с "мгновенными" методами, которые не «встают в очередь». Обновил ответ.

[Антон]

Сергей Соколов: Спасибо, работает

[Сергей Соколов]

Антон: в таком варианте будут проблемы если несколько раз быстро наехать на один элемент. Его более раннее «закрытие» перебьёт более позднее «открытие». Так что надо запоминать таймаут и канцелить его при последующих ховерах над тем же элементом.