title: How to iterate elements over time in jquery
body: <p>I'm working on this automated, non-endless slideshow, with dynamically loaded content. Each image has to be acompanied by sound. So far I got dynamic loading of both images and sounds down. But it all happens at once, which it shouldn't. I figured, that <code>setTimeout</code> can come in handy here, to set the interval between each pair, but all I got is either last image multiplied by the iteration count or script not working at all. <code>delay</code> also didn't prove to be of any help.
  Here's whot I got so far:</p>
  
  <pre><code>function displayImages(data){   
      var count = data; 
      var pixBox = $('#picture-box'); 
      var imgPre = 'resources/exhibit-'; 
      var imgExt = '.png';
      var sndExt = '.wav';
  
      for(i = 1; i &lt; count; i++) {        
          var imgSrc = '&lt;img src="' + imgPre + i + imgExt + '"&gt;';
          var sndSrc = new Audio(imgPre + i + sndExt);                
          sndSrc.play();
          pixBox.append(imgSrc);
      }   
  }
  </code></pre>
  
  <p>My question is: how to set the <code>setTimeout</code> (or whatever function is the best here), for it to iterate over time. Say, to set the change of img/sound pairs every 2 seconds?</p>