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

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

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

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');
});

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

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移动到它们的新位置。但也许使用不同的解决方案更好

有人能给我一些建议吗

谢谢大家!

编辑： 我想案子结束了，谢谢大家！

---

使用

。中心{位置：相对；
左边距：自动；
右边距：自动；
}

更新：

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

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

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

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

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

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

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',''); 
});

然后，在window.load函数中，或在任何需要制作动画的地方，都可以使用如下代码：

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

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

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设置为使用绝对定位，然后使用回调函数（动画的最后一个参数）运行动画，该函数在动画完成时将其设置为相对定位。

为什么要使用jQuery来居中？它现在确实飞了进来。但是当动画完成后，div会自动设置到屏幕的右侧。请看：有什么解决方案如何解决这个问题？谢谢嗯，这很奇怪，我的代码在JSFiddle中工作：JSFiddle.net/PPTMH/4。“我会调查的。”菲利普：好的，我想我把它修好了。问题是，动画完成后需要清除“left”属性，否则它仍将使用绝对定位。不幸的是，JSFiddle在测试这一点时并没有很好地工作，因为它不能很好地处理自动边距。如果你创建了一个带有自动边距且没有JavaScript的div，这个div将不会在预览窗口中居中。现在它就像一个符咒。谢谢你的帮助和解释，爱德华。