jquery - 切换有延迟的类(class)

Question

我有 4 个 block ，我希望脚本延迟添加类:出现 1 个 block ，然后是第 2 个 block ，依此类推。这是代码:

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

之前:

...之后:

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

看到这个色 block ，点击后变成黑色。他们是四个人。但我希望 1 个 block 出现在第一个，然后延迟 600 毫秒，脚本将类添加到第二个 block ，然后延迟 1200 毫秒，脚本添加到第三个 block 类。这就是我想要的。

请原谅我，如果我没有解释清楚......

有什么想法吗？

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