title: jQuery Sequential CSS Animation with .wait and .animate
body: <p>I am coding a simple Simon Says game and trying to animate the four game tiles with a sequence of "presses". A press is simply a decrease and then increase in the opacity of this tile. Here's my JSFiddle: <a href="https://jsfiddle.net/thmsdnnr/ru0b73vq/6/" rel="nofollow noreferrer">https://jsfiddle.net/thmsdnnr/ru0b73vq/6/</a></p>
  
  <pre><code>function playSequence(seq) {
    var idTranslate=["","#red","#green","#blue","#yellow"];
    for (var i=0;i&lt;seq.length;i++) {
    var selector=idTranslate[seq[i]];
    $(selector).delay(500*i).animate({opacity: 0.4},100).animate({opacity: 1.0},350);
    }
  }
  </code></pre>
  
  <p>I call this for testing with:</p>
  
  <pre><code>var testSeq = [1,2,3,4,4,2,1];
  playSequence(testSeq);
  </code></pre>
  
  <p>The code works fine, until it gets to the second instance of tile 4 at index 4 of the array. Strangely, it hangs, then appears to "press" tile 2 (index 5) and then 1 (index 6) very quickly, and then to press tile 4 at the very <em>end</em> of the animation instead of in between.</p>
  
  <p>I can't tell why the animation is getting hung up here. The same behavior happens any time I try to press the same tile more than once, regardless of the test sequence I use (e.g., testSeq=[1,2,1,1,4];).</p>