切换类延迟

Question

我有4个块，我想要脚本添加延迟类：出现1块，然后第二个等等。这里是代码：

$(‘#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块出现第一，然后延迟600毫秒和脚本添加类到第二块，然后延迟1200毫秒和脚本添加到第三块类。这就是我想要的。

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

有什么想法？

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