Question

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

我做了一个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“position”属性会影响旧属性。有谁知道原因和可能的解决方案？

Answer 1

当您将<p>设置为position: absolute时，它会从文档流中取出，而下一个非绝对<p>会向上移动以获取释放的空间。然后你会看到那个刚刚重新定位的<p>元素，而且它的top现在确实是0（因为在推送它之前没有流入元素）。

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

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

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

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

Updated fiddle

更新到position：absolute后检索$（）。position（）更改

1 个答案: