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

问题描述：

我不确定这里有什么正确的解决方案。我使用了搜索功能和谷歌，但我仍然需要一些建议。需要窗口调整大小帮助。更改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'); 
});

我得到它的动画工作，但我只是想的div移动到新位置没有动画。但也许最好使用不同的解决方案？

有人请给我一些建议吗？

谢谢！

编辑：关闭我想，谢谢大家！ http://jsfiddle.net/jruddell/bV8qp/2/

你为什么使用jQuery来居中？ – dezman 2012-07-16 16:14:55

答

更新：

原来我最初的想法完全不是那么回事，和正确的答案是使用的绝对和相对定位的组合。你似乎已经知道了这一点，但我正在纠正我的答案，以利于他人。

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

与其直接在元素上设置CSS，我建议在两个不同的类之间切换，一个用于“动画”状态，另一个用于“居中”状态。通过这种方式，您可以向元素添加其他样式，而无需更改动画代码。然而，为了做到这一点，一旦完成动画的直接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将自己设置在屏幕的右侧。请参阅：http://studio1984.nl/test。html 任何解决方案如何解决这个问题？谢谢！ – philiph 2012-07-18 16:42:01

嗯，这很奇怪，我的代码在JSFiddle中工作：jsfiddle.net/PPTMH/4。我会研究这个。 – Edward 2012-07-18 17:58:42

@philiph好的，我想我修好了。问题是你需要在动画结束后清除“left”属性，否则它仍然会使用绝对定位。不幸的是，JSFiddle实际上并不能很好地测试它，因为它不能很好地处理自动边距。如果你创建一个带有自动边距的div并且根本没有JavaScript，那么div不会居中在预览窗口中。 – Edward 2012-07-18 18:14:57

答

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

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

相关推荐