Как отменить jQuery fadeOut() после его запуска?

У меня есть базовый элемент div для представления сообщения, которое я показываю в течение нескольких секунд, а затем исчезаю, используя

$('#message').fadeOut(5000);

Я хочу иметь возможность отменить исчезновение, если пользователь наводит курсор мыши на div.

Как я могу отменить исчезновение , как только метод fadeOut начал исчезать div?

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

$('#message').mouseenter(function() {
  clearTimeout(this.timeout);
});
$('#message').mouseleave(function() {
  this.timeout = setTimeout("$('#message').fadeOut(5000)", 3000);
});
$('#message').fadeIn(2000, function() {
  this.timeout = setTimeout("$('#message').fadeOut(3000)", 3000);
});

Ответы

Ответ 2

Кроме того, вы можете проверить, находится ли элемент в середине анимации с помощью селектора :animated:

$('#message').mouseover(
    function () {
      if($(this).is(':animated')) {
         $(this).stop().animate({opacity:'100'});
      }
    }
);

Ответ 3

В моем случае stop() просто не работал, по крайней мере, в Firefox, после поиска я понял, что это должен быть stop(true, true):

$('#message').mouseover(
    function () {
         $(this).stop(true, true).fadeOut();
    }
);

stop(): останавливает текущую анимацию для соответствующих элементов.

или даже вместо этого вы можете использовать finish():

$('#message').mouseover(
    function () {
         $(this).finish().fadeOut();
    }
);

но есть побочный эффект в отношении finish(), он также останавливает все остальные запущенные анимации.

finish(): останавливает текущую анимацию, удаляет все анимации в очереди и завершает все анимации для соответствующих элементов.

Узнайте больше здесь.