Good afternoon all. I am experiencing a problem in which I'm sure there has to be an easy solution I seem to be overlooking. I have three PNG images with transparent backgrounds that I would like to rotate using jQuery. So far, my coding seems to be fine for one exception; I'd like to hide the images/divs that are in the background (when they are not in the forefront of the rotate cycle) because they can be seen underneath whatever image is on top. The functionality seems to be on...it just seems I'm missing a piece of some sort (I suspect a combination of .hide() & .show()) to hide whatever elements are in the back. My code is as follows:

HTML

Code:
<div id="contentrotate">
       <div class="current">
               <a href="">
                    <img src="images/streamline_home_banner.png" alt="Photo Gallery" name="streamlinebanner" height="400" width="485" class="gallery" /></a>
       </div>
       <div>
               <a href="">
                    <img src="images/collaborate_home_banner.png" alt="Photo Gallery" name="collaboratebanner" height="400" width="485" class="gallery" /></a>
        </div>
        <div>
                <a href="">
                    <img src="images/business_change_banner.png" alt="Photo Gallery" name="businessbanner" height="400" width="485" class="gallery" /></a>         
         </div>
</div>
jQuery

Code:
<script type="text/javascript">
    $("document").ready(function() {
		setInterval("rotateImages()", 2000);
	});
	
	function rotateImages()	{
		var oCurPhoto = $('#contentrotate div.current');
		var oNxtPhoto = oCurPhoto.next();
		if (oNxtPhoto.length == 0)
			oNxtPhoto = $('#contentrotate div:first');
		
		oCurPhoto.removeClass('current').addClass('previous');
		oNxtPhoto.css({opacity:0.0}).addClass('current').animate({opacity:1.0},1000,
		function() {
                    oCurPhoto.removeClass('previous');
                });
		}
</script>
CSS

Code:
#contentrotate {
	position: relative;
	height: 400px;
	width: 485px;
}

#contentrotate div {
	position: absolute;
	z-index: 0;
}

#contentrotate div.previous {
	z-index: 1;
}

#contentrotate div.current {
	z-index: 2;
}
--Any help/suggestions would be greatly appreciated.