0

我正在制作自己的图像交换器：

function slideImages() {
    var images = $('#frontimageswap a');

    $(images[0]).fadeOut(1000).fadeIn(1000, function() {
        $(images[1]).fadeOut(1000).fadeIn(1000, function() {
            $(images[2]).fadeOut(1000).fadeIn(1000, function() {
                $(images[3]).fadeOut(1000).fadeIn(1000, function() {
                    $(images[4]).fadeOut(1000).fadeIn(1000, function() {
                        $(images[5]).fadeOut(1000).fadeIn(1000);
                    });
                });
            });
        }); 
    });
}

$(function() {
    slideImages();
    setInterval(slideImages, 12000);
});//READY

这工作正常，例如：http: //jsfiddle.net/RMUta/13/

但是当我添加position: absolute将图像堆叠在一起时，它会中断 - 所有动画似乎都是同时发生的。

有人知道如何解决这个问题或为什么会发生这种情况吗？

4

1 回答 1

2

它实际上做得很好。其他实际上正在消失，但隐藏在堆栈顶部的最后一个元素后面。

您想要做的是淡出，最后一个元素并将其放在其他元素后面。这样，下一个元素（倒数第二个）现在位于顶部。可以将其想象为将顶牌放在所有其他牌的后面，以显示下一张牌。

常规是

/*
1. Fade out
2. Prepend the last element to the container.
   This moves the element to the back of the stack, since the last one is on top.
3. Show it, since fadeOut sets display:none. We need to toggle it back.
*/

var container = $('#frontimageswap');

setInterval(function () {
    //fade
    $('a:last-child', container).fadeOut(600, function () {
      $(this)
        .prependTo(container) //send to the back
        .show();              //make it visible
    });
}, 1000);
于 2013-06-11T06:00:29.880 回答