title: Javascript - Changing contents of a slideshow's div on timer, results in all elements being overlaid
body: <p>I have a slideshow, but would like to periodically change the contents of the slideshow.</p>
  
  <p>Based on fairly standard jQuery/CSS3 from many many websites, running on localhost, I have...</p>
  
  <pre><code>    &lt;script&gt;
          $(function() {
              $("#slideshow &gt; div:gt(0)").hide();
              var changeSlide = setInterval(function() {
                $('#slideshow &gt; div:first')
                  .fadeOut(500)
                  .next()
                  .fadeIn(500)
                  .end()
                  .appendTo('#slideshow');
              }, 2000);
  
              var reLoadMyData = setInterval(function() {
                  $("#slideshow").load("data.xml");
              },5000);
          });
      &lt;/script&gt;
  </code></pre>
  
  <p>After reloading, all the (new) divs are overlaid on top of each other. However every 2 seconds one does disappear - it's just they get into a bad state.</p>
  
  <ul>
  <li>How can I fix the overlaid problem? I've tried <code>$("#slideshow &gt; div:gt(0)").hide();</code> before/after loading data.xml, and tried removing all child elements of #slideshow, however this has no effect.</li>
  <li>Is there a way I can load() at the 'end' of the divs, without requiring a second Interval (which is a bit messy really)?</li>
  </ul>