Особенности jQuery методов fadeIn, fadeOut и fadeTo

[Sombressoul]

Очередь на то и очередь.

jQuery.stop()

$( selector ).stop( true , true ).fadeIn( duration );
$( selector ).stop( true , true ).fadeOut( duration );

Завершает анимации с прерыванием очереди и джампом на конец текущей анимации, после чего уже запускает следующую.

[svtux]

Проверено было в первую очередь. Никакой разницы в данном случае, т.к. очередь и без того мала.

[Sombressoul]

Кстати… Что-то меня терзают смутные сомнения…

Если очень быстро двигать указателем туда-сюда, можно «поймать» момент, когда анимация прекращается, как и положено, после вызова метода stop(), но следующая анимация не работает!
Код оперативной проверки этой ошибки:

target.fadeOut().stop().fadeIn()

Если проверять это на видимой картинке то оно, естественно, работать не будет, т.к. мы берём картинку с «opaticy: 1» и говорим ей «Исчезни!», а потом сразу же «Нет! Стой! А ну вернись обратно в opacity=1.» — и всё это за тысячные доли секунды. Естественно, создаётся впечатление, что анимация не отрабатывает.

С видимым изображением код должен быть обратным. Например:

$( 'a.avatar img' ).fadeIn().stop().fadeOut();

Проверено на Chrome 27.0.1453.94 с версией jQuery, которая прикручена к Хабру (просто киньте в консоль — аватарки испарятся).

Извините, но никак не получается повторить Ваш опыт… :-)

Может быть дадите ссылку на рабочий пример с багом?

[Sombressoul]

Тогда уж вот код оперативной проверки ошибки (раз речь о цикличных действиях):

var i = 100;
for(;i|0;i--){
    $( 'a.avatar img' ).fadeOut().stop().fadeIn();
    $( 'a.avatar img' ).fadeIn().stop().fadeOut();
}

У меня всё равно отрабатывает. ЧЯДНТ?

[svtux]

Замысел несколько другой. Я специально не стал повторять примеры уже написанные в баг-репорте, на который я дал ссылку в описании. Там весьма наглядно показан баг. Сокращенный вариант из всех примеров оттуда это как раз:

target.fadeOut().stop().fadeIn()

Здесь подразумевается, что target изначально невидимый, т.е. opacity = 0.

Циклы сам не проверял, в этом нет нужды, баг проявляется на первом же случае, а вообще, думаю, что для полной наглядности там не хватает метода delay(), но прежде всего, последним методом должно быть fadeIn. Раз уж ошибка в нём.

[svtux]

$( 'a.avatar img' ).fadeIn().stop().fadeOut();

Значит, fadeOut работает правильно, и это лишний раз подтверждает, что в fadeIn баг.

Рабочий пример сделал, это полный аналог задуманной реализации:
jsfiddle.net/svtux/yTHx2/2/

[svtux]

Пересмотрел еще раз, в исходной задаче между блоками меню не было отступов, поэтому переделал.
Время анимации для наглядности сделал 1с., чтобы легче было уловить ошибку:

jsfiddle.net/svtux/yTHx2/3/

И на испытаниях вспомнил явление, которое заставило меня начать разбираться в том, что вообще происходит и почему это не работает:
При быстрых переходах между блоками возникает один каверзный момент, когда блок под указателем, во-первых, не становится видимым, а во-вторых, анимация на нём зависает, и если попытаться сбросить анимацию, перемещая указатель на другой блок и обратно, ничего не происходит до тех пор, пока мы не дождемся завершения анимации на соседнем блоке. Логика здесь простая, и в целом, понятно, почему так происходит. Но, при всём уважении, так работать не должно!

[Sombressoul]

Спасибо. Теперь я залип на .fadeIn() вместе с Вами… :)

[svtux]

Прошу прощения, уставший не разобрался сразу. Имел ввиду, что .stop(true) дает такой же результат.
А ваше предложение .stop(true, true) даёт несколько другой эффект, как вы понимаете. Требовалась плавность анимации. Но это работает, да.

[BR0kEN]

Солидарен с тем, что это вообще не баг. Можно сделать минимум три реализации смены изображения при помощи методов fade(In|Out|To).

Пара примеров (js, css): jsfiddle.net/BR0kEN/FuBm9/

з.ы. Если что-то не так понял, поправьте.

[svtux]

Чуть выше в ветке показал пример, где эта «фича» особенно «режет глаз». Ссылка.

Важна именно одновременная анимация, что-то близкое к этому в вашем примере с использованием transition, только на jQuery.

[Harrix]

Огромное спасибо! Наконец-то исправил «фичу» на своем сайте. Никак до этого не мог разобраться, как исправить эту проблему.

[sompylasar]

Заметка полезная.
А вы не пробовали для такого рода анимаций CSS Transitions? Какая ваша целевая (браузерная) аудитория?

[svtux]

Не пробовал только потому что не мой проект. Столкнулся с задачей, решил, отложил.

В свою очередь, сразу после готовности скрипта сделал заказчику предложение использовать modernizr и pure js для анимации по таймеру, и только в случае необходимости загружать уже весь jQuery и дополнительный скрипт самой анимации к нему.

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