如何通过jquery将div与图像交叉淡入淡出

我的结构如下：

<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>

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>

这是第一张图片

这是第二张图片

这是第三张&最后一张图片

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

<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>