如何增量動畫6個盒子？

Question

這裏是我的html ...

 <div class="project"> 
      <div class="box"> 

      </div> 
     </div> 
     <div class="project"> 
      <div class="box"> 

      </div> 
     </div> 
     <div class="project"> 
      <div class="box"> 

      </div> 
     </div> 
     <div class="project"> 
      <div class="box"> 

      </div> 
     </div> 
     <div class="project"> 
      <div class="box"> 

      </div> 
     </div> 
     <div class="project"> 
      <div class="box"> 

      </div> 
     </div> 

這裏是我的JavaScript ...

$('.box').each(function(){ 
      $(this).animate({ 
       width: 300, 
       height: 200, 
       top: 0, 
       left: 0 
      }, 500); 
     }); 

我希望每個框在一個接一個動畫。我可以專門做這件事，但代碼對於所有的回調都很長。想知道我如何正確地循環他們？

Answer 1

你可以看看遞歸函數。

function animateBox(i) { 
    $('.box').eq(i).animate({ // animate this one 
        width: 300, 
        height: 200, 
        top: 0, 
        left: 0 
       }, 500, 
    function() { // when this one is complete 
     if($('.box').eq(i + 1).length > 0) { // if next one availabe 
      animateBox(i + 1); // call recursively for next one 
     } 
    }); 
} 

animateBox(0); // start process 

http://jsfiddle.net/pimvdb/753yU/

Answer 2

你可以用它全部變成你從這樣完成函數調用的函數。

function animateAll() { 
    var boxes = $(".box"); 
    if (boxes.length == 0) return; 

    function animateBox(n) { 
     $(boxes.get(n)).animate({ 
      width: 300, 
      height: 200, 
      top: 0, 
      left: 0 
     }, 500, function() { 
      ++n; 
      if (n < boxes.length) { 
       animateBox(n); 
      } 
     }); 
    } 

    animateBox(0); // start the first one 
} 

Answer 3

我花了一些時間，但我得到了它:)

Working Example

它使用遞歸函數來選擇行的下一個元素，如果該元素不存在，它會停止該功能。

代碼：

var i = 0; 

    function animate_next() { 
     if ($('.box:eq('+i+')').length == 0) { 
      return false; 
     } 
     $('.box:eq('+i+')').animate({ 
      width: 300, 
      height: 200, 
      top: 0, 
      left: 0 
     }, 500,function() { i++; animate_next(); }); 

    } 
    animate_next();