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

【问题标题】：jQuery Add then remove width to consecutive elements in a loopjQuery添加然后删除宽度到循环中的连续元素
【发布时间】：2013-05-08 00:27:00
【问题描述】：

好的，一旦页面完成加载，我想为一组元素添加一个宽度，一个接一个地循环。

例子：

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

所以它会将宽度添加到第一个元素，然后删除然后移动到第二个元素，依此类推。

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

我该怎么做？

【问题讨论】：

你不应该有相同 id 的元素

标签： jquery jquery-animate

【解决方案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)

【讨论】：

它不会移动到下一个元素，只是移动到第一个元素。