title: Simple JQuery Timed Image Rotation
body: <p>For some reason, the following has no effect. This is most likely a product of me not having any sleep and the solution is probably very simple...</p>
  
  <p>JS: </p>
  
  <pre><code>&lt;script src="http://code.jquery.com/jquery-1.6.1.js"&gt; &lt;/script&gt;
      &lt;script&gt;
          function swapImages(){
            var $active = $('#switch .active');
            var $next = ($('#switch .active').next().length &gt; 0) ? $('#switch .active').next() : $('#switch img:first');
            $active.fadeOut(function(){
                $active.removeClass('active');
                $next.fadeIn().addClass('active');
            });
          }
  
          $(document).ready(function(){
            // Run our swapImages() function every 5secs
            setInterval('swapImages()', 5000);
          }
      &lt;/script&gt;
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="switch"&gt;&lt;img src="images/chalk.jpg" class="active" /&gt;&lt;img src="images/students.jpg" /&gt;&lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#switch{
      margin-left: auto;
      margin-right: auto;
      width: 996px;
      height: 374px;
  }
  
  #switch img{
      display:none;
  }
  
  #switch img.active{
      display:block;
  }
  </code></pre>