Comments 14
Очередь на то и очередь.
jQuery.stop()
Завершает анимации с прерыванием очереди и джампом на конец текущей анимации, после чего уже запускает следующую.
jQuery.stop()
$( selector ).stop( true , true ).fadeIn( duration );
$( selector ).stop( true , true ).fadeOut( duration );
Завершает анимации с прерыванием очереди и джампом на конец текущей анимации, после чего уже запускает следующую.
Проверено было в первую очередь. Никакой разницы в данном случае, т.к. очередь и без того мала.
Кстати… Что-то меня терзают смутные сомнения…
Если проверять это на видимой картинке то оно, естественно, работать не будет, т.к. мы берём картинку с «opaticy: 1» и говорим ей «Исчезни!», а потом сразу же «Нет! Стой! А ну вернись обратно в opacity=1.» — и всё это за тысячные доли секунды. Естественно, создаётся впечатление, что анимация не отрабатывает.
С видимым изображением код должен быть обратным. Например:
Проверено на Chrome 27.0.1453.94 с версией jQuery, которая прикручена к Хабру (просто киньте в консоль — аватарки испарятся).
Извините, но никак не получается повторить Ваш опыт… :-)
Может быть дадите ссылку на рабочий пример с багом?
Если очень быстро двигать указателем туда-сюда, можно «поймать» момент, когда анимация прекращается, как и положено, после вызова метода stop(), но следующая анимация не работает!
Код оперативной проверки этой ошибки:
target.fadeOut().stop().fadeIn()
Если проверять это на видимой картинке то оно, естественно, работать не будет, т.к. мы берём картинку с «opaticy: 1» и говорим ей «Исчезни!», а потом сразу же «Нет! Стой! А ну вернись обратно в opacity=1.» — и всё это за тысячные доли секунды. Естественно, создаётся впечатление, что анимация не отрабатывает.
С видимым изображением код должен быть обратным. Например:
$( 'a.avatar img' ).fadeIn().stop().fadeOut();
Проверено на Chrome 27.0.1453.94 с версией jQuery, которая прикручена к Хабру (просто киньте в консоль — аватарки испарятся).
Извините, но никак не получается повторить Ваш опыт… :-)
Может быть дадите ссылку на рабочий пример с багом?
Тогда уж вот код оперативной проверки ошибки (раз речь о цикличных действиях):
У меня всё равно отрабатывает. ЧЯДНТ?
var i = 100;
for(;i|0;i--){
$( 'a.avatar img' ).fadeOut().stop().fadeIn();
$( 'a.avatar img' ).fadeIn().stop().fadeOut();
}
У меня всё равно отрабатывает. ЧЯДНТ?
Замысел несколько другой. Я специально не стал повторять примеры уже написанные в баг-репорте, на который я дал ссылку в описании. Там весьма наглядно показан баг. Сокращенный вариант из всех примеров оттуда это как раз:
Здесь подразумевается, что target изначально невидимый, т.е. opacity = 0.
Циклы сам не проверял, в этом нет нужды, баг проявляется на первом же случае, а вообще, думаю, что для полной наглядности там не хватает метода delay(), но прежде всего, последним методом должно быть fadeIn. Раз уж ошибка в нём.
target.fadeOut().stop().fadeIn()
Здесь подразумевается, что target изначально невидимый, т.е. opacity = 0.
Циклы сам не проверял, в этом нет нужды, баг проявляется на первом же случае, а вообще, думаю, что для полной наглядности там не хватает метода delay(), но прежде всего, последним методом должно быть fadeIn. Раз уж ошибка в нём.
$( 'a.avatar img' ).fadeIn().stop().fadeOut();
Значит, fadeOut работает правильно, и это лишний раз подтверждает, что в fadeIn баг.
Рабочий пример сделал, это полный аналог задуманной реализации:
jsfiddle.net/svtux/yTHx2/2/
Пересмотрел еще раз, в исходной задаче между блоками меню не было отступов, поэтому переделал.
Время анимации для наглядности сделал 1с., чтобы легче было уловить ошибку:
jsfiddle.net/svtux/yTHx2/3/
И на испытаниях вспомнил явление, которое заставило меня начать разбираться в том, что вообще происходит и почему это не работает:
При быстрых переходах между блоками возникает один каверзный момент, когда блок под указателем, во-первых, не становится видимым, а во-вторых, анимация на нём зависает, и если попытаться сбросить анимацию, перемещая указатель на другой блок и обратно, ничего не происходит до тех пор, пока мы не дождемся завершения анимации на соседнем блоке. Логика здесь простая, и в целом, понятно, почему так происходит. Но, при всём уважении, так работать не должно!
Время анимации для наглядности сделал 1с., чтобы легче было уловить ошибку:
jsfiddle.net/svtux/yTHx2/3/
И на испытаниях вспомнил явление, которое заставило меня начать разбираться в том, что вообще происходит и почему это не работает:
При быстрых переходах между блоками возникает один каверзный момент, когда блок под указателем, во-первых, не становится видимым, а во-вторых, анимация на нём зависает, и если попытаться сбросить анимацию, перемещая указатель на другой блок и обратно, ничего не происходит до тех пор, пока мы не дождемся завершения анимации на соседнем блоке. Логика здесь простая, и в целом, понятно, почему так происходит. Но, при всём уважении, так работать не должно!
Прошу прощения, уставший не разобрался сразу. Имел ввиду, что .stop(true) дает такой же результат.
А ваше предложение .stop(true, true) даёт несколько другой эффект, как вы понимаете. Требовалась плавность анимации. Но это работает, да.
А ваше предложение .stop(true, true) даёт несколько другой эффект, как вы понимаете. Требовалась плавность анимации. Но это работает, да.
Солидарен с тем, что это вообще не баг. Можно сделать минимум три реализации смены изображения при помощи методов fade(In|Out|To).
Пара примеров (js, css): jsfiddle.net/BR0kEN/FuBm9/
з.ы. Если что-то не так понял, поправьте.
Пара примеров (js, css): jsfiddle.net/BR0kEN/FuBm9/
з.ы. Если что-то не так понял, поправьте.
Чуть выше в ветке показал пример, где эта «фича» особенно «режет глаз». Ссылка.
Важна именно одновременная анимация, что-то близкое к этому в вашем примере с использованием transition, только на jQuery.
Важна именно одновременная анимация, что-то близкое к этому в вашем примере с использованием transition, только на jQuery.
Огромное спасибо! Наконец-то исправил «фичу» на своем сайте. Никак до этого не мог разобраться, как исправить эту проблему.
Заметка полезная.
А вы не пробовали для такого рода анимаций CSS Transitions? Какая ваша целевая (браузерная) аудитория?
А вы не пробовали для такого рода анимаций CSS Transitions? Какая ваша целевая (браузерная) аудитория?
Не пробовал только потому что не мой проект. Столкнулся с задачей, решил, отложил.
В свою очередь, сразу после готовности скрипта сделал заказчику предложение использовать modernizr и pure js для анимации по таймеру, и только в случае необходимости загружать уже весь jQuery и дополнительный скрипт самой анимации к нему.
На досуге нашел на трекере такое нелепое, на мой взгляд, основание для закрытия баг-репорта и подумал, что открывать повторно толку мало. Нужно браться за патч самому. Но так как пока времени на это совсем нет, то хотя бы поделиться с общественностью. Авось кто и найдет у себя в графике несколько часов, чтобы сделать патч.
В свою очередь, сразу после готовности скрипта сделал заказчику предложение использовать modernizr и pure js для анимации по таймеру, и только в случае необходимости загружать уже весь jQuery и дополнительный скрипт самой анимации к нему.
На досуге нашел на трекере такое нелепое, на мой взгляд, основание для закрытия баг-репорта и подумал, что открывать повторно толку мало. Нужно браться за патч самому. Но так как пока времени на это совсем нет, то хотя бы поделиться с общественностью. Авось кто и найдет у себя в графике несколько часов, чтобы сделать патч.
Sign up to leave a comment.
Особенности jQuery методов fadeIn, fadeOut и fadeTo