Simon says one by one animation trouble

Question

I'm having some troubles when animating the popular Simon Says game. Here's what I'm doing:

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

        }

The logic of the game is working, but I can't make the lights animate one by one. They just animate all at the same time.

I've tried with setTimeout(), but I can't get it work.

this may be useful: http://stackoverflow.com/questions/1218152/how-can-i-animate-multiple-elements-sequentially-using-jquery — technophobia, Feb 18 '14 at 19:09
No, the colors are already push randomly on the array, just want to loop the array and for each value animate the color, one by one. Right now it animates all the elements at the same time. if the array its filled with ["#red", #blue", "green"] i want the #red div animate first then the #blue and so on... — andoni, Feb 18 '14 at 19:12

score 1 · Answer 1 · answered Feb 18 '14 at 19:09

Partial answer since I don't personally have much experience with the jQuery animate function

Judging from the jQuery .animate documentation, I believe you have the animate function parameters incorrect. It should be something like this:

$(id).animate({
                opacity: 0.3
                // other CSS properties as desired
              },
              300)

The first parameter should contain the CSS the animate function should progress towards, while the second parameter contains the duration in milliseconds. There is another method as well, with the second parameter as an object containing options, which you can see in the documentation link provided.

Let me know whether that helps.

score 1 · Answer 2 · answered Feb 18 '14 at 19:23

Change your for loop to a function that calls itself recursively. The recursive call should be from within the setTimeout, this way you get one iteration of the recursion per Timeout time.

function animate(seq, idx, timeout) {
    anim(seq[idx]);
    setTimeout(function() { animate(seq, idx+1, timeout) }, timeout);
}

Once you have set up the sequence you want to animate, you can start the animation by calling:

animate(sequence, 0, timeout)

and you would get one color animating per timeout.

score 1 · Accepted Answer · answered Feb 18 '14 at 19:31

First, you'll have to pass the index in the function :

anim(sequence[i], 1);

Then use delay() like that :

$(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

Simon says one by one animation trouble

3 Answers3