jquery - jqueryで画像と一緒にdivをクロスフェードする方法

Question

私は次の構造を持っています：

<div id="container">
<img src="http://webaddress/firstimage.png" alt="1stimage" />
<img src="http://webaddress/secondimage.png" alt="2ndimage" />
<img src="http://webaddress/thirdimage.png" alt="3rdimage" />
</div>

次のjqueryコードで画像をクロスフェードします：

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

CSSは次のとおりです。

#container{
position: relative;
float:left;
margin-top: 7px;
}
#container img{position:absolute;}

しかし、次のような短い説明を持つ画像がある可能性があるため、画像だけでなく div をクロスフェードしたいと考えています。

<div id="container">
  <div id="1stimg">
   <img src="http://webaddress/firstimage.png" alt="1stimage" />
   <p>This is the first image</p>
  </div>
  <div id="2ndimg">
   <img src="http://webaddress/secondimage.png" alt="2ndimage" />
   <p>This is the second image</p>
  </div>
  <div id="3rdimg">
   <img src="http://webaddress/thirdimage.png" alt="3rdimage" />
   <p>This is the third & last image</p>
  </div>
</div>

どうやってやるの？どんな助けでも大歓迎です。前もって感謝します