需要窗口大小调整帮助.更改div位置(而不是动画)

Question

我不确定什么是正确的解决方案。我已经使用了搜索功能和谷歌，但我仍然需要一些建议。

我在window.load上有几个div正在制作动画。例如：

var showreel = $('#plbg');              
showreel.delay(1500).animate({
right: $(window).width()/2 - showreel.outerWidth()/2}, 500, 'swing');

因此，这会将div设置为屏幕中心的动画。现在，当我调整窗口的大小时，它不会动态居中。

我又写了几行，像这样：

$(window).resize(function() {
var showreel = $('#plbg');              
showreel.delay(1500).animate({
right: $(window).width()/2 - showreel.outerWidth()/2}, 500, 'swing');
});

我用它来处理动画，但我只想在没有动画的情况下将div移动到它们的新位置。但也许使用不同的解决方案更好？

有人能给我一些建议吗？

谢谢！

编辑：我想案子已经结案了，谢谢大家！http://jsfiddle.net/jruddell/bV8qp/2/

Answer 1

更新：

事实证明，我最初的想法并不奏效，正确的答案是使用绝对和相对定位的组合。你似乎已经明白了这一点，但为了他人的利益，我正在纠正我的答案。

由于页边距的"auto"值不能设置动画，因此您仍然需要使用绝对定位来将div设置为页面加载时的中心，就像在原始代码中所做的那样。然而，一旦div到达页面的中心，您可以将其样式更改为具有自动边距的相对定位，以使其在窗口调整大小时保持居中。

与其直接在元素上设置CSS，我建议在两个不同的类之间切换，一个用于"动画化"状态，另一个则用于"居中"状态。这样，您就可以在不需要更改动画代码的情况下为元素添加其他样式。然而，为了做到这一点，您需要确保在动画完成后撤消对CSS的直接修改，否则直接在元素上设置的绝对定位属性将覆盖样式表设置的相对定位属性。

因此，在页面的CSS中，您可以定义两个类，如下所示：

.fly-in {
    position:absolute;
    left:0px;
}
.center {
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

然后在window.load函数中，或者在任何你想做动画的地方，你都可以有这样的代码：

var showreel = $('#plbg');
showreel.addClass("fly-in");
showreel.delay(1500).animate({
    left: ($(window).width() - showreel.width()) / 2 + "px" 
}, 500, 'swing', function() {
    showreel.removeClass("fly-in").addClass("center");
    //Clear the "left" property that animate set directly on the div
    showreel.css('left',''); 
});

这会在运行动画之前将div设置为使用绝对定位，然后使用回调函数（animate的最后一个参数）运行动画，该函数会在动画完成时将其设置为相对定位。

Answer 2

使用.center {position: relative; margin-left: auto; margin-right: auto; }