javascript - 西蒙一一说动画麻烦

Question

我在为流行的 Simon Says 游戏制作动画时遇到了一些麻烦。这是我正在做的:

squence = new Array();

colors = ["#green", "#red", "#yellow", "#blue"];


function add_sequence() {

            var number = Math.random();
            number = number * (4-1);
            number = number.toFixed(0);

            sequence.push(colors[number]);

      for (var i = 0; i < sequence.length; i++) {

              anim(sequence[i]);

       }; 

 }

      function anim(id){

           $(id).animate({
                    opacity: 0.3,
                    duration: 300
                },  function(){
                    $(id).animate({
                        opacity: 0
                    }, 300);
             });

        }

游戏的逻辑是可行的，但我无法让灯光一一呈现动画。它们只是同时动画。

我试过 setTimeout()，但我无法让它工作。

Answer 1

首先，您必须在函数中传递索引:

anim(sequence[i], 1);

然后像那样使用delay():

$(id).delay(600*i) //Duration of the complete animation
.animate({opacity : 0.3}, 300) //Don't insert the duration in the CSS properties
.animate({opacity : 0}, 300) //You can chain animation