Javascript 按顺序设置跨距动画

作为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++;
  }

}

我设法改变了背景，但所有的跨度都同时改变了颜色。我应该改变什么，使其连续而不是同时进行

---

完整代码如下：

您的while循环将立即遍历所有数字。使所有超时处于同一时间。您需要延迟脚本（可能使用类似于

setTimeout（function（）{--yourfunctionhere--}，1000）；

---

很抱歉，我不能这样做；在移动设备上，问题是

while

循环几乎是瞬间通过每个动画函数，具有相同的500毫秒延迟。使用相同的

I

变量，我们可以交错这些函数。这是一个更新的代码笔：

基本上，只需更新每个

switch

语句，将延迟乘以循环的迭代：

setTimeout(animateRed,500 * i);

---

根据需要调整延迟长度。让我知道这是否合理。

只需将设置超时设置为不同的值，即500、1000

或者您可以尝试在切换类之前添加.delay（500）

---

或者只使用css，transition delay

您的实现将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);
}

---

使用CSS和HTML显示动画效果。

您可以创建一个队列，然后按照超时放置元素的顺序执行。使用这种模式，您可以节省大量的行数和麻烦。我将“generatedPattern”作为数组的实现在这里不也是一个队列吗？因此，我也应该使用超时延迟我的while循环吗好的，在@ghost_dad给出的回答中，这是一个非常好的主意。这种方法很有效。现在的问题是，更长的超时时间的转换使特定的跨度处于动画状态，即使在下一个跨度处于动画状态时也是如此。我希望每个跨度都被动画化，然后在进入下一个跨度动画之前返回到原始状态……这就是我为什么要这样做的原因提到根据需要调整延迟长度（应该至少与之前的动画一样长）。老实说，每个季度的激活状态都非常微妙，因此很难测试我的解决方案。你的意思是-$（“#4”）.toggleClass（“animateYellow”）.delay（500）；否，延迟（500）。改为切换类（）。有许多方法可以使项目有序。我认为最简单的方法是让你的超时值不同。可爱的。。。谢谢

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