javascript - 按顺序动画跨度

Question

作为 Simon 游戏的一部分，我想按顺序为 span 标签制作动画(使用 css 改变背景)。

  function animateGeneratedPattern(){

  //alert(generatedPattern);//pattern generated randomly in advance.
  var i=0;
  while(i<generatedPattern.length){

    switch(generatedPattern[i]){

      case 1:

        animateRed();
        setTimeout(animateRed,500);
        break;

      case 2:

        animateGreen();
        setTimeout(animateGreen,500);
        break;

      case 3:

        animateBlue();
        setTimeout(animateBlue,500);
        break;

      case 4:

        animateYellow();
        setTimeout(animateYellow,500);
        break;

    }

    i++;
  }

}

对于每种合适的颜色，我使用这种类型的函数在背景之间切换:

function animateYellow(){

  $("#4").toggleClass("animateYellow");

}

我已经设法改变了背景，但是所有的跨度都同时改变了颜色。我要更改什么才能使其按顺序而不是同时进行？

完整代码在这里:http://codepen.io/jpninanjohn/pen/JKoYqR?editors=1010

Answer 1

问题是 while 循环几乎同时运行了每个动画函数，具有相同的 500 毫秒延迟。使用相同的 i 变量，我们可以错开这些。这是一个更新的代码笔:http://codepen.io/thecox/pen/ezmVEy?editors=1010

基本上，只需更新每个 switch 语句，将延迟乘以循环的迭代次数:

setTimeout(animateRed,500 * i);

根据需要调整延迟长度。让我知道这是否有意义。