绝对定位元素上同时淡入/淡出的 JQuery 错误

Question

我有一组元素想要一个接一个地显示，淡出第一个元素，同时淡入第二个元素，并在到达最后一个元素时循环它们

如果我绝对定位第一个元素，同时淡出，第二个元素不会定位没有任何问题，除非是最后一个。有一个错误（？）使最后一个项目（应该淡出）在将位置设置为绝对位置后使用空间，就好像它具有相对位置一样。

您可以在此处查看该错误： http://jsfiddle.net/XekVc/

Chrome 12.0 中存在此行为（我认为是最后一个版本）和 FF 3.6.17

我不想让它们全部绝对定位，因为我的应用程序中的容器有其他相对定位的元素，我必须在此之后调整，所以这是我的最后一个选择。

有谁知道这是我的代码中的错误，还是 jquery/浏览器的渲染引擎问题？

Answer 1

在玩小提琴时，我可以通过在更改其位置之前执行 element.prependTo(element.parent()) 将离开的元素放置在即将到来的元素之前来避免该错误。

http://jsfiddle.net/e253r/

这可能是一种解决方法，但我仍然真正感兴趣找出它是否是一个错误以及在哪里......

Answer 2

编辑所以我决定查看.animate()路线：

.thing {
    background-color: #9E9E9E;
    border: 2px solid #393939;
    padding: 30px;
    width: 140px;
    height: 70px;
    position: absolute;
}

$(function() {
    var index = 0;
    $('.thing').css("opacity", "0");
    var current = $('.thing:first-child').show();
    $('.thing:last-child').css({
        "position": "static"
    });
    setInterval(function() {
        index = (index + 1) % 3;
        var next = $($('.thing')[index]);
        current.animate({
            opacity: 0
        }, 1500);
        next.animate({
            opacity: 1
        }, 1500);

        current = next;
    }, 2000);
})

http://jsfiddle.net/XekVc/16/

似乎有效

Answer 3

不知道为什么会发生这种情况。除了绝对定位还能设置top:0吗？容器位置也必须设置

http://jsfiddle.net/XekVc/17/