javascript - 间隔运行函数

Question

我想以.col-n间隔为一组元素 ( ) 设置动画。假设我有四个.col元素（.col-1等），我想为每个元素制作动画，但不是在一个完成之后，而是更早。

我试着用 做一些for，setInterval但它不起作用（它只是循环）：

    container.children('.col').last().on('click', function() {
        for(var i = 1; i <= columns; i++) {
            var int = self.setInterval(function() {
                console.log('a')
            },500*i)
        }
    });

我从 jQuery 中尝试过each这个，但也不是这个。有人可以指出我正确的方向吗？

小提琴：http: //jsfiddle.net/s5DMe/

请注意，我不想一个接一个地运行函数，而是运行一个，等待（无论第一个是否完成），再运行另一个。

Answer 1

.col-1 { background: #ccffff; transition-delay: 200ms }

.col-2 { background: #b3ffff; transition-delay: 400ms }

.col-3 { background: #99ffff; transition-delay: 600ms }

.col-4 { background: #80ffff; transition-delay: 800ms }

您可以同时将动画类添加到所有.col-*'s 中。transition-delay处理虚假排序。

当然，您还需要添加属性的浏览器前缀版本。

Answer 2

好的，我自己做的 ;) 就是使用区间然后在里面创建一个伪循环：

    container.children('.col').last().on('click', function() {
        var i = 0;
        setInterval(function() {
            if(i != 4) {
                i++;
                $('.col-'+i).addClass('act')
            }
        },500)
    });

不管怎么说，还是要谢谢你 ：）