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设置为 parent 的 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 回答
0

事实证明,我没有考虑transition设置为 parent 的 css 属性.backPanel,这导致函数在加载元素时读取元素的宽度和高度。为所有属性设置过渡后,内部 div 仍从 0 向其最终宽度和高度增长。

供将来参考的注意事项:在读取对象的尺寸时,请始终考虑对象动画的过渡。

于 2013-05-23T21:34:34.843 回答