0

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

我在 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/

4

2 回答 2

0

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

于 2012-07-16T16:13:47.687 回答
0

更新：

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

由于无法为边距的“自动”值设置动画，因此您仍然需要使用绝对定位将 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）运行动画，该函数在动画完成时将其设置为相对定位。

于 2012-07-16T17:10:34.343 回答