jquery - 试图创建一个 jQuery 图像旋转器，但只能让它的前半部分工作

Question

我正在尝试创建一个图像旋转器，其中一个图像将淡入下一个图像，依此类推，直到它循环回到第一张图像。我得到的前两张图片可以正常工作，但剩下的 3 张没有正确褪色。他们只是跳入视野。

我知道我仍然需要考虑轮换结束的原因。我还没有处理这个问题，因为我只是想让第一轮轮换工作。

我缺少什么才能让它正常工作？

我的 HTML:

    <div id="imageRotator">
    <div id="image01" class="current">
        <img src="images/imageRotate01.jpg">
    </div>
    <div id="image02" class="next">
        <img src="images/imageRotate02.jpg">
    </div>
    <div id="image03" class="hidden">
        <img src="images/imageRotate03.jpg">
    </div>
    <div id="image04" class="hidden">
        <img src="images/imageRotate04.jpg">
    </div>
    <div id="image05" class="hidden">
        <img src="images/imageRotate05.jpg">
    </div>
</div>

我的 CSS:

#imageRotator div {
    position: absolute;
}

.current {
    z-index: 1;
}

.next {
    z-index: 0;
}

.hidden {
    z-index: -1;
}

我的 jQuery:

$(document).ready(function() {

    var firstImage = $('#image01');
    var currentImage, nextImage;

    setInterval(rotateImages, 2000);

    function rotateImages() {
        currentImage = $('div.current');
        nextImage = $('div.next');

        //the first image fades away
        currentImage.animate({opacity: 0}, 2000, function() {
            currentImage.removeClass('current');    
        });

        //bring the second image into view
        nextImage.animate({opacity: 1}, 2000, function() {

            //make the new image the current image
            nextImage.removeClass('next').addClass('current');

            //the next image in the rotation becomes the 'next' image
            nextImage.next().addClass('next').removeClass('hidden');
        });
    }
});

Answer 1

默认情况下，您没有设置零 opacity，因此第一个元素之后的 opacity 没有动画。尝试将它设置为 0 到除第一个之外的所有元素，看看会发生什么。

#imageRotator div {
    position: absolute;
    width: 30px;
    height: 30px;
    outline:1px solid red;
    background:red;
    opacity: 0;
}
#imageRotator div:first-child{
        opacity:1;
}
.current {
    z-index: 1;
}

.next {
    z-index: 0;
}

.hidden {
    z-index: -1;
}

演示:http://jsfiddle.net/pavloschris/N3gXd/