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)

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

1 个答案: