Скажем, я назвал $element.fadeIn(200). 100 мс позже, что-то происходит на этой странице, и я хочу прервать это исчезновение и сразу же fadeOut(). Как я могу это сделать?
Если вы вызываете вызов $element.fadeIn(200).fadeOut(0), то fadeOut() происходит только после завершения fadeIn().
Также есть способ, которым я могу проверить $element, чтобы определить, работает ли fadeIn() или fadeOut()? У элемента $есть какой-либо член .data(), который изменяется?
stop() удалит только анимации, которые еще не выполнены.
используйте stop(true, true) для прерывания и удаления текущей анимации тоже!
Вы получите плавный эффект 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/
AFAIK fadeIn и fadeOut работают синхронно, поэтому нет, я не думаю, что вы можете прервать их во время их запуска. Вам придется подождать, пока это не будет выполнено.
Если вы вызываете метод stop, он остановит все анимации. Причина, по которой вызов fadeOut в вашем примере не вызывается до тех пор, пока fadeIn не будет вызван тем, что анимация выполняется в порядке очереди.
Вы можете использовать функцию stop(), чтобы прервать любую анимацию, которая имеет место в этот конкретный момент. Дайте мне знать, если это сработает.
Его всегда хорошая практика держать функции, которые имеют дело с анимацией и т.д. внутри функции обратного вызова функции. Вы можете узнать, закончил ли fadeIn() выполнение вашей функции из своего обратного вызова, например:
$element.fadeIn(200, function(){
//do callback
});
Если это невозможно, вы можете объявить переменную вне функции. Скажем, var elmFadeInRunning = false. Измените его на true, прежде чем вы вызовете fadeIn и измените его на false в обратном вызове fadeIn. Таким образом, вы можете узнать, все ли работает, если elmFadeInRunning == true.
Другой рабочий пример
<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>
Попробуйте вывести анимацию из очереди.
$('...').fadeIn(200).dequeue().fadeOut(0);