JavaScript: SetInterval不工作，如果我使用position:absolute

JavaScript: SetInterval doesnt work if I use position:absolute

本文关键字：absolute position SetInterval 工作 JavaScript 如果      更新时间：2023-09-26

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

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

有谁知道如何解决这个问题或者为什么会发生这种情况?

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

你要做的是淡出最后一个元素，并把它放在其他元素的后面。这样，下一个元素(倒数第二个)现在位于顶部。你可以把它想象成把一副牌中最上面的一张牌放在其他牌的后面，以显示下一张牌。

例程是 
/*
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);
相关文章：