Как остановить () анимацию, но разрешить текущую - PullRequest
Новая
       3

Как остановить () анимацию, но разрешить текущую

2 голосов
/ 09 января 2012

Использование jQuery 1.7.2 

$(function(){
    $('#parentElem').mouseenter(function(){
        $('.myElem').animate({opacity:1}, 'fast');
    }).mouseleave(function(){
        $('.myElem').stop().animate{opacity:0}, 'slow');
    });
});

В этом примере у меня есть элемент, который появляется на событии mouseenter, а затем останавливается и снова исчезает (на mouseout), чтобы дать пульсирующий эффект.

Однако у меня есть проблема - при использовании метода .stop() текущая анимация будет прервана и снова исчезнет - мой эффект 'пульсации' не будет работать. Конечно, это именно то, что .stop() равно для - однако я действительно хочу просто очистить очередь и позволить завершить текущую анимацию, добавляя анимацию затухания в очередь.

Есть идеи?

P.S Я также попробовал метод .clearQueue(), но он демонстрирует похожее поведение.

EDIT: Что-то, что я действительно должен был упомянуть - мне нужно, чтобы элемент оставался блеклым, пока курсор находится над ним - поэтому использование обратного вызова в функции animate не решит проблему. Я обновил код, чтобы сделать его более очевидным. Извините за путаницу.

1 Ответ

5 голосов
/ 09 января 2012

Вы можете использовать полный обратный вызов метода animate для выполнения fadeOut: 

$('.myElem').animate({opacity:1}, 'fast', function() {$(this).stop().animate{opacity:0}, 'slow');});

Обновление

Аналогичный подход может быть использован для установки флага, чтобы гарантировать, что анимация остановлена, а затем полностью исчезла при последующем наведении / исчезновении: 

(function() {
  var doFadeOut = false;
  var fadeOut = function() {
    if (doFadeOut) {
        $('.myElem').stop().animate({ opacity: 0 }, 'slow');
        doFadeOut = false;
    } else {
        doFadeOut = true;
    }
  };
  $('#parentElem').mouseenter(function() {
    $('.myElem').animate({ opacity: 1 }, 'fast', fadeOut);
  }).mouseleave(fadeOut);
}())
...