Javascript 按时间间隔运行函数

我想设置一组元素的动画。按间隔显示col-n。假设我有四个.col元素.col-1等等，我想给每个类设置动画，但不是在一个元素完成之后，而是更早

我试着用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中尝试了每一个，但也不是这个。有人能给我指一下正确的方向吗

小提琴：

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

.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-*。转换延迟处理人造排序

---

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

好的，我自己做的；关键在于使用间隔，然后在内部创建一个伪循环：

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

---

无论如何，谢谢：

您能创建一个JSFIDLE吗？1使用窗口而不是self，2使用控制台显示值，但不发出警报显示是重复的吗？我添加了JSFIDLE链接@未定义它不是重复的，因为我想在其他函数在meaintime中运行时运行函数，例如，运行持续1s的函数，然后在500ms后运行另一个函数。@TomekBuszewski请解释到底应该发生什么。请发布一个示例。我想运行addClass css动画。我在循环$'.col-'+I.delay500*I.addClass'act'中制作了这个，它完全运行了。啊，我明白了-我以为你想使用jquery动画。在本例中，尝试将tansition delay属性添加到每个对应的.col-*类中。投票有什么用？根据所提供的信息，这是一个完全合理的答案。他特别使用了jquery和animate这两个词，不是吗？请发布一个例子。@TomekBuszewski更新了answerSo，而不是使用现有的css转换延迟，你是在用javascript重新创建它的唯一目的？因为我想要所有的js解决方案，是的。另外，我不必为每个.col都编写css，fiddle css只是一个例子。