切换类有延迟

Question

我有4个块，我希望脚本添加有延迟的类：显示1个块，然后是第2个，依此类推。这是代码：

$(‘#about’).click(function() {
    $(‘.front’).toggleClass(‘open-front’);
    $(‘.back’).toggleClass(‘open-back’);
});

在：

......以及之后：

After http://eyes.in.ua/wp-content/uploads/2014/07/question-2.png

点击此颜色块后，点击变为黑色。他们四岁。但我希望1块出现第1，然后延迟600ms并且脚本将类添加到第2块，然后延迟1200ms并且脚本添加到第3块类。这就是我想要的。

请原谅我，如果我没有正确解释它......

有什么想法吗？

Answer 1

你的意思是这样的吗？

$('#about').click(function() {
    $('.front').toggleClass('open-front');
    setTimeout(function() {
        $('.back').toggleClass('open-back');
        setTimeout(function() {
            $('.third').toggleClass('open-third');
        }, 600);
    }, 600);
});

---

还是这样的？

$('#about').click(function() {
    var delay = 600;
    $('.front').each(function(i, e) {
        setTimeout(function() {
          $(e).toggleClass('open-front');
        }, i * delay);
    });
    $('.back').each(function(i, e) {
        setTimeout(function() {
          $(e).toggleClass('open-back');
        }, i * delay);
    });
});