Цепочки анимации jQuery, которые влияют на различные элементы
$(document).ready(function() {
$("#div1").fadeIn("slow");
$("#div2").delay(500).fadeIn("slow");
$("#div3").delay(2000).fadeIn("slow");
$("#div4").delay(8000).fadeIn("slow");
});
Это моя текущая настройка, но я чувствую, что это не лучший способ написать это. Я не могу найти примеров того, как вы лучше напишете это время. Любая помощь? Я был бы признателен.
Я также должен добавить, что время каждого элемента не согласовано.
Ответы
Ответ 1
fadeIn
выполняет обратный вызов в качестве второго параметра. Этот обратный вызов выполняется, как только анимация завершена. Если вы хотите, чтобы элементы постепенно исчезали, вы могли бы связать обратные вызовы:
$(document).ready(function() {
$("#div1").fadeIn("slow", function(){
$("#div2").fadeIn("slow", function(){
$("#div3").fadeIn("slow", function(){
$("#div4").fadeIn("slow");
});
});
});
});
Это может быть переписано с использованием массива селекторов и одного метода, если вам это нравится:
var chain = function(toAnimate, ix){
if(toAnimate[ix]){
$(toAnimate[ix]).fadeIn('slow', function(){ chain(toAnimate, ix + 1 )});
}
};
$(document).ready(function(){
chain(['#div1', '#div2', '#div3', '#div4'], 0);
});
Посмотрите последнюю в действии в JSBin.
Ответ 2
Это можно сделать элегантно, так как 1.8:
$("div").toArray().map(function(e){
return function(){
return $(e).fadeIn(600).promise()
};
}).reduce(function( cur, next ){
return cur.then(next);
}, $().promise());
http://jsfiddle.net/f3WzR/
Ответ 3
Я бы сделал это в цикле, если вы говорите о постоянном приращении (и пока они отображаются в том же порядке на странице).
$("#div1,#div2,#div3,#div4").each(function( idx ) {
$(this).delay( idx * 1000 ).fadeIn("slow");
});
Пример: http://jsfiddle.net/km66t/
Для увеличения задержки используется индекс, прошедший через .each()
.
Итак, вы эффективно делаете:
$("#div1").delay( 0 ).fadeIn("slow");
$("#div2").delay( 1000 ).fadeIn("slow");
$("#div3").delay( 2000 ).fadeIn("slow");
$("#div4").delay( 3000 ).fadeIn("slow");
РЕДАКТИРОВАТЬ: Чтобы надеяться на устранение проблемы в комментарии ниже, вы можете вместо этого сохранить массив требуемых задержек и получить доступ к соответствующему индексу массива, используя индекс из .each()
.
var delays = [0, 1000, 2000, 4000];
$("#div1,#div2,#div3,#div4").each(function( idx ) {
$(this).delay( delays[ idx ] ).fadeIn("slow");
});
Ответ 4
Не довольны предоставленными ответами, вот что я использовал:
var $steps = $('#div1, #div2, #div3');
// iterate throught all of them
$.each($steps,function(index,value){
$stage.fadeIn('slow', function(){
// You can even do something after the an animation step is completed placing your code here.
// run the function again using a little introspection provided by javascript
arguments.callee
});
})
Таким образом, вам не нужно объявлять задержки.