如何通过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>

我该怎么做？ 任何帮助将不胜感激。 提前致谢