jQuery添加，然后在循环中删除连续元素的宽度 [英] jQuery Add then remove width to consecutive elements in a loop

问题描述

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

OK so once a page has finished loading, I want to add a width to a group of elements, one after the other in a loop.

示例:

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

因此它将在第一个元素上增加宽度，然后删除然后再移动到第二个元素上，依此类推.

So it would add the width to the first element, then remove then move on to the second element, so on and so forth.

然后到达最后一个，就重新开始.

Then once it gets to the last one, it starts over.

我该怎么做?

推荐答案

我关于延期的想法行不通，但是在循环中您可以添加.delay(..) 相应地延迟不同元素上的动画

Edited : my idea with deferreds didnt work , but in cycle you can add .delay(..) to delay animations on different elements accordingly

请参见jsfiddle http://jsfiddle.net/vittore/Yzpft/

see 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)        
 })

现在，如果您需要立即进行稳定操作并且元素数量恒定，则可以使用以下代码

Now if you need to constanly do it without delay and your number of element is constant you can use following code

 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添加，然后在循环中删除连续元素的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！