jQuery - исчезающая анимация при наведении

Question

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

$(function() {
  $('.delete').hide();
  $('#photos img').hover(function() {
    $(this).parents('li').children('.delete').fadeIn('fast');
  }, function() {
    $(this).parents('li').children('.delete').fadeOut('fast');
  });
});

Но если я быстро перемещаю мышь в изображение и из него, новая анимация всегда добавляется в очередь, и когда я останавливаюсь, я вижу, что ссылка некоторое время пульсирует. Я попытался использовать .stop (true), но иногда эффект затухания вообще не работает (или просто до некоторого значения непрозрачности меньше 1). Что я могу сделать?

Спасибо, Эрик

Answer 1

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

Answer 2

Одним из способов предотвращения подобных проблем является использование stop () в сочетании с fadeTo (), как показано во фрагменте ниже:

$(function() {
  $('.delete').fadeTo(0, 0);
  $('#photos img').hover(function() {
    $(this).parents('li').children('.delete').stop().fadeTo('fast', 1);
  }, function() {
    $(this).parents('li').children('.delete').stop().fadeTo('fast', 0);
  });
});

Надеюсь, это решит вашу проблему!