如何增量动画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();