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-*。 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)
    });

非常感谢：）

间隔运行功能

2 个答案: