title: Loop through images
body: <p>I know this is around a lot, but I just can't get it to work :/</p>
  
  <pre><code>    &lt;div class='container'&gt;
          &lt;img src="images/1.jpg" alt=""&gt;
          &lt;img src="images/2.jpg" alt=""&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>So I have 2 images, which with the below CSS are fixed to the full size of the browser window:</p>
  
  <pre><code>        &lt;style type="text/css"&gt;
          .container {
              position:fixed; 
              top:-50%; 
              left:-50%; 
              width:200%; 
              height:200%;
          }
          .container img {
              position:absolute; 
              top:0; 
              left:0; 
              right:0; 
              bottom:0; 
              margin:auto; 
              min-width:50%;
              min-height:50%;
          }
      &lt;/style&gt;
  </code></pre>
  
  <p>Currently, it just shows the last image (2) to appear at full size.  However, I want to use some jQuery to show the first one, then after X seconds, fade out number 1 and loop through fading in each image.  I assume it would be best to use setInterval, then fadeOut and then fadeIn images, but whatever I do doesn't work.</p>
  
  <p>I was trying to go down this line:</p>
  
  <pre><code>        &lt;script type="text/javascript"&gt;
          $(document).ready(function() {
  
              $('.container').children('img').each(function(i) { 
                  $(this).fadeOut();
              }); 
  
          });
      &lt;/script&gt;
  </code></pre>