JQueryを使用して同じ場所でさまざまな画像のフェードインとフェードアウトを行う方法は？

Question

私は5枚の画像を持っています。それはヘッダーのロゴのようなものです。最初の画像のような画像がフェードアウトするようにしたいのですが、2番目の画像を同じ場所に表示し、次に3番目の画像を表示してから最初の画像を表示する必要があります。フェードインしてフェードアウトする必要があります。

htmlコード：

<div id="slideshow"> 
    <div> 
     <img id="img1" src="images/heading%20bar%201.png" style="height: 150px; width: 100%; padding-bottom: 10px;"/> 
    </div> 
    <div> 
     <img id="img2" src="images/heading%20bar%201.png" style="height: 150px; width: 100%; padding-bottom: 10px;"/> 
    </div> 
    <div> 
     <img id="img3" src="images/heading%20bar%201.png" style="height: 150px; width: 100%; padding-bottom: 10px;"/> 
    </div> 
</div> 

jqueryのコード

$(document).ready(function() { 
     $("#slideshow > div:gt(0)").hide(); 

     setInterval(function() { 
      $('#slideshow > div:first') 
       .fadeOut(1000) 
       .next() 
       .fadeIn(1000) 
       .end() 
       .appendTo('#slideshow'); 
     }, 3000); 
    }) 

私が最初にこのコードをしようとすると、それを行う際に、ひとつずつフェードアウトその後、3列にすべての画像を表示され、 2番目の時間は、最初の画像が2番目の行に移動し、次に2番目の画像が1番目の行にフェードインします。

私は最初のイメージをフェードアウトし、次に2番目のイメージをフェードインし、次に3番目のイメージにします。

私はjQueryのに新しいです、おかげで

Answer 1

だけフォローインラインCSSを持っているあなたのHTMLを変更します。

<div id="slideshow" style="margin:50px auto;position:relative; width:400px; height:250px; padding:10px;"> 
    <div> 
     <img id="img1" src="http://lorempixel.com/400/250/" style="position:absolute;top:10px;bottom:10px;left:10px;right:10px;"/> 
    </div> 
    <div> 
     <img id="img2" src="http://lorempixel.com/400/250/sports" style="position:absolute;top:10px;bottom:10px;left:10px;right:10px;"/> 
    </div> 
    <div> 
     <img id="img3" src="http://lorempixel.com/400/250/animals" style="position:absolute;top:10px;bottom:10px;left:10px;right:10px;"/> 
    </div> 
</div> 

これは

Answer 2

$(function() { 
    // match all divs with ID starting with 'photo' 
    $("div[id^=photo] > img").hide(); 
    setTimeout(function(){ 
     $("div[id^=photo]").each(function() { 
      var rand = Math.floor(Math.random() * $(this).children().length); 
      $(this).find('img:eq(' + rand + ')').fadeIn(); 
     }); 
    }, 500);  
});