Цепочки анимации jQuery, которые влияют на разные элементы

Question

$(document).ready(function() { 
    $("#div1").fadeIn("slow"); 
    $("#div2").delay(500).fadeIn("slow"); 
    $("#div3").delay(2000).fadeIn("slow"); 
    $("#div4").delay(8000).fadeIn("slow"); 
}); 

Это моя текущая настройка, но я чувствую, что это не лучший способ написать это. Я не могу найти примеров того, как вы лучше напишете это время. Любая помощь? Буду признателен.

Следует также добавить, что время каждого элемента несовместимо.

Answer 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); 
}); 

See this last one in action at JSBin.

Answer 2

Я бы сделал это в цикле, если вы говорите о постоянном приращении (и до тех пор, пока они отображаются в том же порядке на странице).

$("#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"); 

---

EDIT: многообещающе решить вопрос в комментарии ниже, вы могли бы вместо того, чтобы хранить массив задержек, которые вы хотите использовать, и доступ к соответствующему индексу массива с использованием индекса от .each().

var delays = [0, 1000, 2000, 4000]; 

$("#div1,#div2,#div3,#div4").each(function(idx) { 
    $(this).delay(delays[ idx ]).fadeIn("slow"); 
}); 

Answer 3

Не доволен предоставленные ответы, вот что я использовал:

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 
     }); 
    }) 

Таким образом, вы не должны объявлять о задержках.

Answer 4

Это можно сделать элегантно, так как 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/