Затухание в задержке при загрузке

Question

Я наткнулся на что-то очень хорошее, я хотел бы использовать в каком-то будущем проекте.

Это анимированная непрозрачность при загрузке, или вы можете назвать ее постепенным появлением.

Я подумал, можно ли связать некоторые элементы вместе (например, 3), чтобы element2 начинался только тогда, когда element1 закончен, и element3, когда нет. 2 есть?

Или вы должны определить задержку на element2 и умножить задержку на element3?

Answer 1

Если бы у вас были div, скажем, class="faded", вы могли бы постепенно увеличивать нагрузку на каждую из них, например:

$(".faded").each(function(i) {
  $(this).delay(i * 400).fadeIn();
});

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

Вы можете использовать .hide(), чтобы скрыть их при загрузке страницы, например:

$(".faded").hide()

Или сделайте это в CSS:

.faded { display: none; }

Answer 2

Вы можете получить начало fadeIn для element2 во время обратного вызова завершения element1:

 element1.fadeIn(500, function() {  
       element2.fadeIn(500, function() { 
            etc...

Answer 3

Так как я не верю, что у этих типов анимации есть что-то на пути успешного обратного вызова, если вы знаете, сколько времени потребуется элементу для затухания, вы можете использовать что-то вроде setTimeout () для запуска следующего правильное количество времени прошло.

Редактировать: Я исправлен.