Question

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

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

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

此行为出现在Chrome 12.0（我认为是最新版本）和FF 3.6.17

中

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

有没有人知道我的代码是否存在错误，或者这是jquery / browser的渲染引擎问题？

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

不确定为什么会这样。除了绝对定位之外，你能设置顶部：0吗？容器位置也必须设置

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

关于绝对定位元素的同时fadeIn / fadeOut的JQuery错误

3 个答案: