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

Question

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

我在 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 的最后一个参数)运行动画，在动画完成时将其设置为相对定位。