2

margin-left要素の をそれ自体の幅の半分の負の値に設定したい。これは代わりにドキュメントの幅を取得します:

$("#services .backPanel > div").css({
    'margin-top': -($(this).height()/2),
    'margin-left': -($(this).width()/2)
});

私は何を間違っていますか？

CSS

#services{
    margin: 127px 0 0 0;
    width: 100%;
    height: 100%;
    position: relative;
}
#services .services{
    position: relative;
    margin: 40px 9% 0 9%;
}

#services .backPanel{
    float: none;
    position: absolute;
    top: 0;
    left: 0;
    padding: 30px 50px;
    z-index: 80;
    width: 100%;
    height: 100%;
    background: #f9f8f8;
}

#services .backPanel div{
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
}

html

<div id="services">
    <div class="services">
        <h1>Services</h1>
        <div class="row-fluid">
            <div class="span4">
                <div class="frontPanel design">
                    <h3>Design and development</h3>
                </div>
                <div class="backPanel">
                    <div>
                        <h3>Design and development</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eget viverra massa.</p>
                    </div>
                </div>
            </div>
         </div>
    </div>
</div>

解決しました

transition親に設定された css プロパティを考慮していなかったことがわかりました.backPanel。これにより、関数は要素の幅と高さを読み込み中に読み取っていました。すべてのプロパティの設定によりtransition、内部divはまだ 0 から最終的な幅と高さに向かって成長していました。

今後の参考のための注記: オブジェクトの寸法を読み取るときは、オブジェクトのアニメーションの遷移を常に考慮してください。

4

2 に答える 2

0

私が間違っていなければ、あなたの場合$(this)を指してwindowいます。試す：

$("#services .backPanel > div").each(function() {
    var element = $(this);
    element.css({
        'margin-top': -(element.height()/2),
        'margin-left': -(element.width()/2)
    });
});

http://jsfiddle.net/peQ2R/

于 2013-05-23T21:02:45.360 に答える