2010-06-28 3 views
4

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

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

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

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

+0

Как правило, это делается с помощью [очереди] (http://api.jquery.com/queue/). – zzzzBov

+0

@zzzzBov Мне было бы интересно, как это будет сделано с помощью очереди, может быть, вы можете опубликовать его как новый ответ, если у него есть какие-то преимущества. –

+0

@PhilippM, не вдаваясь в подробности, вы можете настроить очередь на элемент (я обычно выбираю общий родительский объект при очередности нескольких элементов) и [он будет правильно связывать порядок взаимодействия без необходимости какого-либо причудливого цикла или расчетных таймингов] (http://jsfiddle.net/w4xZg/). – zzzzBov

ответ

12

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

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

You can view a demo of this effect here или a slower version here. 400 для 400мс, продолжительность нормальной .fadeIn() скорости :)

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

$(".faded").hide() 

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

.faded { display: none; } 
+0

Большое спасибо ... Это именно то, что я искал! :-) –

4

Вы могли бы FadeIn на element2 начинаются в момент завершения обратного вызова element1:

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

В то время как это работает для нескольких, это действительно не очень хорошо, когда у вас более 3 или около того :) –

-1

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

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

 Смежные вопросы

  • Нет связанных вопросов^_^