jQuery添加然后删除宽度到循环中的连续元素

Question

好，所以一旦一页完成加载，我想要在一个循环中一个接一个地添加一个元素的宽度。

实施例：

<div id="container-wrap"> 

    <div id="container"></div> 
    <div id="container"></div> 
    <div id="container"></div> 
    <div id="container"></div> 
    <div id="container"></div> 

</div> 

因此，这将宽度添加到所述第一元件，然后取出然后转移到第二元件，等等等等。

然后，一旦它到达最后一个，它重新开始。

我该怎么做？

Answer 1

编辑：我与deferreds想法没有工作，但在循环您可以添加.delay(..) 推迟对不同元素的动画相应

看到的jsfiddle http://jsfiddle.net/vittore/Yzpft/

var containers = $('#container-wrap').find('.container') 

containers.each(function(ind,el) {     
     $(el).delay(800 * ind) 
      .animate({'width': '400px'}, 400) 
      .animate({'width': '100px'}, 400)   
}) 

现在，如果你需要constanly做没有延迟，你的元素数量不变，你可以使用以下代码

var containers = $('#container-wrap').find('.container') 
    , length = containers.length 
    , interval = 800 * length 
    , intervalVar = null 

function animate() { 
    containers.each(function(ind,el) {     
     $(el).delay(800 * ind) 
      .animate({'width': '400px'}, 400) 
      .animate({'width': '100px'}, 400)   
    }) 
}) 

intervalVar = setInterval(animate, interval) 

... and whenever you need to stop it 

clearInterval(intervalVar)