jQuery: прерывание fadeIn () / fadeOut ()

Question

Допустим, я позвонил в $ element.fadeIn (200). Через 100 мсек что-то происходит на этой странице, и я хочу прервать это исчезновение и немедленно вызвать fadeOut (). Как я могу это сделать?

Если вы вызываете вызов $ element.fadeIn (200) .fadeOut (0), fadeOut () происходит только после завершения fadeIn ().

Кроме того, есть ли способ проверить $ element, чтобы определить, запущены ли fadeIn () или fadeOut ()? Есть ли в $ element какой-либо член .data (), который изменится?

Answer 1

stop() удалит только анимации, которые еще не выполнены.

используйте stop(true, true) для прерывания и удаления текущей анимации!

Answer 2

Вы получите плавный эффект fadeIn / Out, очистив очередь, но не перепрыгивая до конца, используя .stop (true, false), но, пожалуйста, обратите внимание, что, поскольку FadeIn может быть прерван таким образом, FadeOut не может.Я сообщил об этом как об ошибке, как много лет назад, но никто не заботился.FadeIn работает только если объект скрыт.Но есть обходной путь ... используйте вместо этого FadeTo - он работает как со скрытыми, так и частично выцветшими объектами:

    $('.a').hover(function(){
    $('.b').stop(true,false).fadeTo(3000,1); // <- fadeTo(), not FadeIn() (!!!)
},function(){
    $('.b').stop(true,false).fadeOut(3000);
});

Вот как это работает: http://jsfiddle.net/dJEmB/

Answer 3

AFAIK fadeIn и fadeOut работают синхронно, поэтому нет, я не думаю, что вы можете прервать их, пока они работают.Вам придется подождать, пока он не выполнится.

Если вы вызовете метод stop для элемента, он остановит все анимации.Причина, по которой вызов fadeOut в вашем примере вызывается только после fadeIn, заключается в том, что анимации выполняются в виде очереди.

Answer 4

Всегда полезно хранить функции, связанные с анимацией и т. Д., Внутри функции обратного вызова.Вы можете определить, завершился ли fadeIn (), выполнив вашу функцию из обратного вызова, например:

$element.fadeIn(200, function(){
   //do callback
});

Если это невозможно, вы можете объявить переменную вне функции.Скажем, var elmFadeInRunning = false.Измените его на true прямо перед вызовом fadeIn и измените его обратно на false в обратном вызове fadeIn.Таким образом, вы можете узнать, работает ли он по-прежнему, если elmFadeInRunning == true.

Answer 5

Вы можете использовать функцию stop () для прерывания любой анимации, которая происходит в этот конкретный момент.Дайте мне знать, если это работает.

Answer 6

Другой рабочий пример

<div id="fadediv">Yay, I like to fade</div>
<button id="stopdatfade" >Stop that fade!</button>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script>
(function($){ 

    currentfade = $("#fadediv").fadeOut(5000).fadeIn(5000).fadeOut(5000).fadeIn(5000); 
    $('#stopdatfade').on('click', function () { 
        if (typeof currentfade !== 'undefined') { 

            currentfade.stop(true, true);

        } 

    }); 
})(jQuery);
</script>

Answer 7

Попробуйте вывести анимацию из очереди.

$('...').fadeIn(200).dequeue().fadeOut(0);

http://api.jquery.com/queue/

http://api.jquery.com/dequeue/