如何清理這個圖像滑塊

Question

下面是HTML代碼

<div class="fadein"> 
     <img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg"> 
     <img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg"> 
     <img src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg"> 
</div> 

這裏是jQuery代碼

$(function(){ 
    $('.fadein img:gt(0)').hide(); 
    setInterval(function(){ 
    $('.fadein :first-child').fadeOut() 
     .next('img').fadeIn() 
     .end().appendTo('.fadein');} 
     , 4000); 
}); 

所以基本上當我運行這個圖像滑塊，它消失體面很好，但是當它會消失，它會向下推動衰落的圖像。隨着淡入淡出的圖像被壓低，它會將其他HTML內容壓低。但是當第二個圖像進入時，html內容被重置爲正常，並且整個過程再次發生。

我該如何預防？

Answer 1

嘗試使用hide()而不是​​代替:first-child元素。

結果：http://jsfiddle.net/2tRtn/