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

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

Answer 2

更新：

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

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

窗口调整大小帮助需要。改变div位置（而不是动画）

2 个答案: