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

【问题标题】：JavaScript: SetInterval doesnt work if I use position:absoluteJavaScript：如果我使用 position:absolute，SetInterval 不起作用
【发布时间】：2013-06-11 05:54:46
【问题描述】：

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

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

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

【问题讨论】：

听起来你的问题是级联动画，而不是setInterval。

标签： javascript jquery css function

【解决方案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);

【讨论】：