1

我正在为 HTML 元素的动态淡入淡出寻找可能的解决方案。我的问题的核心是 jQuery 的 .position() 的一种奇怪行为，并在检索旧位置后更新了 css“位置”属性。

我制作了一个 JSFiddle 来说明我的问题：http: //jsfiddle.net/svenhanssen/DDYVs/

/*
This works. I'll get a position.top from 0 to 90
*/

$("p").each(function( p ) {
    var position = $(this).position();

    console.log(position.top);
});

/*
This doesn't work. I'll get a position.top of 0 for all elements. Why does the css set effects the position?
*/

$("p").each(function( p ) {
    var position = $(this).position();

    console.log(position.top);

    $(this).css({
        position: "absolute"
    });
});​

之后以某种方式更改css“位置”属性会影响旧属性。有谁知道原因和可能的解决方案？

4

1 回答 1

5

<p>将 a 设置为它的那一刻将position: absolute被从文档流中取出，并且下一个非绝对值<p>向上移动以占用释放的空间。然后你到达刚刚重新定位的<p>元素，果然它top现在是0（因为在它之前没有流入元素将它向下推）。

这是一个可能的解决方案：

$("p").each(function( p ) {
    var position = $(this).position();

    console.log(position.top);
}).css({
    position: "absolute"
});​

请注意，现在所有<p>元素position: absolute仅在循环滚动后设置为。

更新的小提琴

于 2012-06-20T10:12:03.650 回答