Animieren von Spannen der Reihe nach

Question

Als Teil eines Simon-Spiels möchte ich die Span-Tags der Reihe nach animieren (Hintergrundänderung mit 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++; 
    } 

} 

Für jede geeignete Farbe, ich bin mit dieser Art von Funktion zwischen Hintergründe wechseln:

function animateYellow(){ 

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

} 

ich es geschafft haben, den Hintergrund zu ändern, aber alle Spannweiten verfärben sich zur gleichen Zeit. Was ändere ich, um es sequenziell anstatt gleichzeitig zu machen? Hier

Voll Code: http://codepen.io/jpninanjohn/pen/JKoYqR?editors=1010

Answer 1

Ihre Implementierung Anwendungen verwenden versuchen hinzufügen generatedPattern als Array und nicht als Warteschlange. Um es als Warteschlange zu verwenden, arbeiten Sie nur mit dem Element [0] und spleißen das Element [0] vor der nächsten Iteration ab. Jede Iteration richtet die nächste Iteration ein, nachdem ausgeführt wurde. Zum Beispiel, versuchen Sie dies:

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 Ihre CSS und HTML verwenden, welche die Animation arbeiten.

Answer 2

Ihre while-Schleife wird Schleife durch alle Zahlen sofort. Alle Zeitüberschreitungen werden gleichzeitig ausgelöst. Sie müssen Ihr Skript verzögern (wahrscheinlich so etwas wie setTimeout(function(){--yourfunctionhere--}, 1000);

leid, dass ich mit kann es nicht tun, auf mobilen

Answer 3

Das Problem ist, dass die while Schleife fast augenblicklich jede der Animationsfunktionen durchläuft, mit dem gleichen .. 500 ms Verzögerung die gleiche i Variable, wir diejenigen staffeln kann hier ein aktualisierter codepen: http://codepen.io/thecox/pen/ezmVEy?editors=1010

Grundsätzlich aktualisieren nur jeder der switch Aussagen die Verzögerung durch die Iteration der Schleife zu multiplizieren:

setTimeout(animateRed,500 * i); 

Passen Sie die Verzögerungslänge nach Bedarf an. Lassen Sie mich wissen, ob das Sinn macht.

Answer 4

nur die unterschiedlichen Werte setTimeouts machen, dh 500, 1000

Oder Sie könnten eine .delay (500) vor toggleClass

oder CSS, Übergang Verzögerung