jquery - 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

编辑：我的延迟的想法不起作用，但在循环中，您可以相应地添加.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)        
 })

现在，如果您需要不断地做到这一点并且您的元素数量是恒定的，您可以使用以下代码

 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)