动画顺序跨越

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循环几乎瞬间贯穿每个动画函数，延迟相同的500ms。使用相同的i变量，我们可以错开这些变量。这是一个更新的代码集：http://codepen.io/thecox/pen/ezmVEy?editors=1010

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

setTimeout(animateRed,500 * i);

根据需要调整延迟长度。如果这是有道理的，请告诉我。

Answer 2

你的while循环会立即遍历所有数字。导致所有超时同时发生。您需要延迟脚本（可能使用setTimeout(function(){--yourfunctionhere--}, 1000);

之类的内容 抱歉，我不能这样做;在手机上

Answer 3

只需使setTimeouts具有不同的值，即500,1000

或者您可以尝试在toggleClass

之前添加.delay（500）

或仅使用css，转换延迟

Answer 4

您的实现使用generatedPattern作为数组而不是队列。要将其用作队列，仅在元素[0]上操作，然后在下一次迭代之前拼接元素[0]。每次迭代都会在执行之后设置下一次迭代。例如，试试这个：

function animateGeneratedPattern() {
    function animateNextPattern(lightup) {
        if (!generatedPattern || generatedPattern.length === 0) {
            return;
        }

        switch(generatedPattern[0]) {
            case 1:
                animateRed();
                break;
            case 2:
                animateGreen();
                break;
            case 3:
                animateBlue();
                break;
             case 4:
                animateYellow();
                break;
        }
        if (lightup) {
            // Long delay before turning light off
            setTimeout(function() {
                animateNextPattern(false);
            }, 500);
        }
        else {
            generatedPattern.splice(0, 1);
            // Small delay before turning on next light
            setTimeout(function() {
                animateNextPattern(true);
            }, 10);
        }
    }

    animateNextPattern(true);
}

JSFiddle of this here使用显示动画效果的CSS和HTML。