Question

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

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将图像堆叠在一起时，它会断开 - 所有动画似乎都会同时发生。

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

Answer 1

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

您要做的是fade out, the last element and place it behind the others。这样，下一个元素（倒数第二个）现在位于顶部。可以把它想象成将所有其他卡放在后面的卡片中，以显示下一张卡片。

例行程序

/*
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);

JavaScript：如果我使用position：absolute，SetInterval不起作用

1 个答案: