使用Jquery动画将相对元素居中

Question

我有一个div #sample，相对位置没有预定宽度;我希望在移开它之后使用以下命令将其居中：

$('#sample').animate({
    "left": -3000
}, 1500);
$('#sample').animate({
    'left': x
}, 1500);

我的问题是我不知道如何计算x。如果#sample绝对定位，我就知道了。但是，我想要相对位置和$（“＃sample”）。width（）与它的实际宽度不一致，以便用它来寻找中心。有什么想法帮助我吗？ 非常感谢你

Answer 1

如果计算元素及其父元素的宽度，则可以按如下方式将其居中，

var elemWidth = $('#sample').width();
var parentWidth = $('#sample').parent().width();
$('#sample').animate({ 'left': (parentWidth/2-elemWidth/2)}, 1500 );

示例

http://jsfiddle.net/wQ3K7/

<强> JS

$(document).ready(function(){
    $('#sample').animate({ "left": -3000 }, 1500 );
    $('input[type="button"]').click(function(){
        var elemWidth = $('#sample').width();
        var parentWidth = $('#sample').parent().width();
        $('#sample').animate({ 'left': (parentWidth/2-elemWidth/2)}, 1500 );
    });
});

<强> HTML

<div id="sample">this is a test</div>
<input type="button" value="animate"/>

<强> CSS

div{
    position:relative;
    background-color:lightgrey;
    width:200px;/*random width*/
}