title: setInterval inside setTimeout not working... why?
body: <p>I'm trying to make an element change opacity based on a series of values pre-set on an array. That action should begin after the user clicks a button AND the system waits for a second.</p>
  
  <p>Here's what I got:</p>
  
  <pre><code>&lt;script&gt;
  $(function() {
  $("#Listening").click(function() {
  
      setTimeout(triggerListening, 1000);
      function triggerListening()
      {
          document.getElementById("listening").className = "listeningIn";
      }
  
      setTimeout(triggerUserTalking, 2000);
      function triggerUserTalking()
      {
  
          var audioSim = [3, 2, 7, 15, 15, 16, 15, 7, 7, 3, 8, 8, 17, 17, 20, 20, 21, 21, 17, 17, 13, 13, 12, 12, 13, 13, 16, 16, 18, 18, 17, 17, 16, 16, 14, 10, 11, 11, 15, 15, 16, 16, 15, 15, 14, 14, 13, 13, 13, 13, 15, 15, 23, 44, 55, 55, 56, 55, 44, 44, 33, 29, 31, 31, 42, 50, 60, 63, 60, 54, 39, 39, 30, 28, 30, 30, 33, 33, 36, 39, 38, 38, 33, 16, 6, 6, 5, 7, 18, 18, 28, 31, 28, 28, 26, 26, 23, 22, 23, 23, 25, 28, 28, 28, 27, 27, 28, 28, 28, 28, 28, 28, 27, 27, 28, 28, 35, 35, 43, 43, 49, 54, 56, 55, 43, 36, 26, 28, 31, 52, 65, 70, 68, 68, 51, 45, 41, 41, 38, 40, 49, 49, 57, 58, 58, 31, 42, 42, 46, 51, 55, 55, 54, 42, 33, 31, 37, 37, 45, 46, 42, 42, 37, 38, 38, 41, 41, 44, 44, 46, 48, 47, 47, 43, 44, 44, 47, 47, 49, 49, 48, 45, 44, 44, 44, 44, 45, 45, 44, 44, 43, 39, 36, 34, 35, 59, 59, 85, 93, 98, 98, 100, 95, 67, 67, 43, 36, 34, 34, 39, 51, 62, 62, 68, 76, 75, 75, 50, 36, 27, 20, 18, 36, 57, 57, 52, 48, 43, 44, 49, 50, 50, 49];
  
          var i = 0;
  
          window.setInterval('step()', 20)
  
          function step() {
              var element = document.getElementById("listening");
              element.style.opacity = "0." + audioSim[i];
              i++;
              if (i == audioSim.length) i = triggerStopTalking;
          }
  
          function triggerStopTalking()
          {
              document.getElementById("listening").className = "listeningOut";
          }
  
      }                   
  
  });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>This works fine expect the changing opacity part...</p>
  
  <p>User clicks Listening and after 1 second the listening object appears on the screen by toggling the "listeningIn" class... after another second that element should change opacity a bunch of times based on the values inside "audioSim"... but it doesn't...</p>
  
  <p>I've tested the setInterval code in a separate html file and it works fine... so I'm thinking I can't have a setInterval inside a setTimeout function? Help?</p>