title: How to clean up this image slider
body: <p>Here is the HTML code</p>
  
  <pre><code>&lt;div class="fadein"&gt;
        &lt;img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg"&gt;
        &lt;img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg"&gt;
        &lt;img src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the JQUERY code</p>
  
  <pre><code>$(function(){
      $('.fadein img:gt(0)').hide();
      setInterval(function(){
       $('.fadein :first-child').fadeOut()
          .next('img').fadeIn()
          .end().appendTo('.fadein');}
          , 4000);
  });
  </code></pre>
  
  <p>So basically when I run this image slider, it fades decently well, but when it fades, it pushes the fading image downwards. And as that fading image is pushed down, it pushes the other html content below it down as well. But when the second image comes in, the html content is reset back to normal, and the process happens all over again.</p>
  
  <p>How can i prevent this?</p>