讓動畫與幾個div的一個循環

Question

我有一個工作動畫jQuery腳本位置：jsfiddle

var speed = 1500; 
var margin = 50; 
var start = 200; 
var next = 1400; 

setTimeout(function() { 
    $("#foo").show().animate({ 
     // marginLeft: startPoint, 
     marginLeft: margin // endPoint 
    }, speed); 
},start + next * 0); 
setTimeout(function() { 
    $("#bar").show().animate({ 
     // marginLeft: startPoint, 
     marginLeft: margin // endPoint 
    }, speed); 
},start + next * 1); 
setTimeout(function() { 
    $("#foobar").show().animate({ 
     // marginLeft: startPoint, 
     marginLeft: margin // endPoint 
    }, speed); 
},start + next * 2); 

我想改變所有DIV ID的成類，然後運行在jQuery的一環，而不是 - 類似這個：animating-several-divs-in-a-sequence。

$(function() { 
    function show() { 
     $('.project_box:not(.completed):first').show(500, function() { 
      $(this).addClass('completed'); 
      show(); 
     }); 
    } 

    show(); 
}); 

我也想從身體標記（「的startPoint」）之外運行的動畫，並使其停止在其當前的「終點」。

任何幫助非常感謝！

注意：請記住，我是jQuery的新手，英語不是我的口語。 :-)

Answer 1

這裏假設您將該類命名爲class="test"。你可以這樣做：

$(document).ready(function(){ 
    var speed = 1500; 
    var margin = 50; 
    var start = 200; 
    var next = 1400; 
    $('.test').each(function(index,element){ 
     setTimeout(function() { 
     $(element).show().animate({ 
      // marginLeft: startPoint, 
      marginLeft: margin // endPoint 
      }, speed); 
     },start + next * index); 
    }); 


}); 

在這裏看到：http://jsfiddle.net/w7o0vezs/