带有setInterval的Jquery旋转器中的问题

Question

这是我的代码： Jquery的：

$(function() {
    setInterval(function rotateImages() {
    var current = $('.current');
    var next = current.next();
    if (next.length == 0)
        next = $('#slideshow a:first');

   current.removeClass('current').addClass('previous');
   next.css({ opacity: 0.0 }).addClass('current').animate({ opacity: 1.0 }, 1000,
        function() {
            current.removeClass('previous');
        });
}, 2000);
});

这是我的HTML：

<div id="slideshow-wrapper">
        <div id="slideshow-inner">
        <div class="current"><a href="#"><img src="images/slideshow/1.png"  /></a></div>
        <div class="previous"><a href="#"><img src="images/slideshow/2.png"  /></a></div>
        <div class="previous"><a href="#"><img src="images/slideshow/3.png"  /></a></div>
        <div class="previous"><a href="#"><img src="images/slideshow/4.png"  /></a></div>
      </div>
      </div>

另一方面，这是我的css：

        #slideshow-wrapper {
            width: 800px; height: 100px;
            box-shadow: 1px 0 100px #000;
            border-radius: 12px;
            margin: auto;

        }
        #slideshow-inner {
            position: relative;
            z-index: 0;
        }
        .previous {
            z-index: 1;

            position: absolute;
}
        .current {
            z-index: 2; 

            position: absolute;
}

但是每次间隔工作时，图像都会忽略z索引并逐个淡出并扩展div ..对于为什么会有任何想法？

提前致谢