title: Ensuring, within the context of a forEach loop, that two different ids can be changed simultanously?
body: <p>Or how can two actions associated with two different ids be bound together?</p>
  
  <p>I am using forEach to loop through an array of character images, and having them animate at different times. (I'm also using .data to associate other images with these character images, but I'm not sure if that would help me here or not.)</p>
  
  <p>I seem to be having an issue: I want to change a bit of CSS related to a specific character, but because the character animations (of them falling) are somewhat random, more often than not a different character will trigger that function <em>first</em> and thus run the CSS line before the specific character (related to the CSS line) lands.</p>
  
  <p>These are the two particular lines; I give more context below:</p>
  
  <pre><code>$("#"+ link.data("animations")).attr('src', imageUrlCharacter+'animations-sitting.png'); 
  $("#shadow2").css("top", "5px");
  </code></pre>
  
  <p>How can I ensure that this one CSS line of code will not run until the forEach loop recognizes the character image has changed? Can I indeed make use of .data again in some way I hadn't thought of before, or is there an easier way?</p>
  
  <p>Here's the gist of the code:</p>
  
  <pre><code>var containers = ["#portfolio-container","#animations-container", etc.];
  
  var links = ["#portfolio", "#animations", "#games", "#fun"];
  
  containers.forEach(function(current){
  var link = $(current);
  ...
  link.animate({
          top: '0'
      }, {
          duration: randomTime,
          easing: 'easeOutBounce',
          step: function(now, tween) {
          ...
          }
  
          complete: function() {
              $("#"+ link.data("dust")).attr('src', 'images/trans.png');
              setTimeout(function() {
                  $("#"+ link.data("portfolio")).attr('src', imageUrlCharacter+'portfolio-sitting.png');
                  $("#"+ link.data("games")).attr('src', imageUrlCharacter+'games-sitting.png');
                  $("#"+ link.data("animations")).attr('src', imageUrlCharacter+'animations-sitting.png'); 
                  ("#shadow2").css("top", "5px");
              }, 500);
          }
      }
  }
  </code></pre>
  
  <p><strong>---- attempts ----</strong></p>
  
  <p>I was hoping something like this might work: </p>
  
  <pre><code>$("#"+ link.data("fun")).attr('src', url).$("#shadow2").css("top", "-25");
  </code></pre>
  
  <p>I also got this working <em>sort of</em>, trying to change the css after the related URL changes:</p>
  
  <pre><code>if ($("#"+ link.data("animations")).attr('src').indexOf('animations-sitting') &gt; 0) 
  { 
      $("#shadow2").css("top", "5px");
  }
  </code></pre>
  
  <p>but wound up getting the error <code>TypeError: $(...).attr(...) is undefined</code>. </p>
  
  <p>I tried putting them in a function together but no go:</p>
  
  <pre><code>(function(){
      $("#"+ link.data("animations")).attr('src', imageUrlCharacter+'animations-sitting.png'); 
      })($("#shadow2").css("top", "5px"));
  </code></pre>
  
  <p><strong>----</strong></p>
  
  <p>Let me know if this is unclear, and thanks in advance.</p>