アニメーションはjQueryの

Question

で順番に私はいくつかのアニメーションを作るためにこのコードを書いて、それが完璧に働いている：

for (var i = 0; i < $("div[id$='-1']").length; i++) { 
      $("div[data-order="+ i +"]").css({opacity: 0, visibility: "visible"}).animate({ 
       top : '0%', 
       opacity: 1 
      }, { 
       duration : 800, 
       easing : 'linear' 
      }); 
    }; 

が、私はそれがいずれも動作しないsetTimeoutを持ついくつかの遅延で順番にそれを表示したいときもっと！

for (var i = 0; i < $("div[id$='-1']").length; i++) { 
     setTimeout(function() { 
      $("div[data-order="+ i +"]").css({opacity: 0, visibility: "visible"}).animate({ 
       top : '0%', 
       opacity: 1 
      }, { 
       duration : 800, 
       easing : 'linear' 
      }); 
     }, 1000); 
    }; 

Answer 1

ます。これを試すことができますし、代わりのループのために、あなたは.each()

$("div[id$='-1']").each(function(index){ 
    setTimeout(function() { 
      $("div[data-order="+ index +"]").css({opacity: 0, visibility: "visible"}).animate({ 
       top : '0%', 
       opacity: 1 
      }, { 
       duration : 800, 
       easing : 'linear' 
      }); 
     }, 1000 * index); 
}); 

Answer 2

使用の数学を使用することができます、

setTimeout(function() { 
    // ... 
}, 1000 * i); 

Answer 3

あなたは.queue()、.delay()を使用することができます.promise()

var order = $("div[data-order]"); 
order.queue("order", $.map(order, function(el) { 
    return function(next) { 
    return $(el).delay(1000).css({opacity: 0, visibility: "visible"}) 
      .animate({ 
       top : '0%', 
       opacity: 1 
      }, { 
       duration : 800, 
       easing : 'linear' 
      }).promise().then(next); 

    } 
})).dequeue("order")