jQuery的動畫彼此相互

Question

我試着陸續動畫一個elment，但我有一些麻煩與此

$.getJSON('http://localhost/json/example/json.json', function(data){ 
     var ele = jsonElements(data); 
     for(var i = 1; i <= ele; i++) 
     { 
      $('#test').append('<a href="#" id="t_'+i+'" class="block-icon"></a>'); 
      $('#t_'+i).animate({ 
       'top': data['t_'+i]['top'], 
       'left': data['t_'+i]['left'] 
       }, 800).delay(1000); 
     } 

    }); 

它的工作原理，但所有的元素都在同一時間的動畫，任何建議如何使一個又一次？

Answer 1

$.getJSON('http://localhost/json/example/json.json', function(data){ 
     var ele = jsonElements(data); 
     one_by_one(ele,1); 
    }); 

function one_by_one(ele,i){ 
if(i > ele) 
return; 

$('#test').append('<a href="#" id="t_'+i+'" class="block-icon"></a>'); 
$('#t_'+i).animate({ 
       'top': data['t_'+i]['top'], 
       'left': data['t_'+i]['left'] 
       }, 1000, function() { 
    // Animation complete 
    one_by_one(ele,i+1); 
    }); 

} 

call one_by_one（i）;

我加在http://jsfiddle.net/VS8tQ/64/