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 に答える