javascript jQuery：动画边距为自动？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4511036/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery: Animate Margins to Auto?
提问by Nathan
I'm trying to animate an image so that it centers itself. Here's the code I'd like to use:
我正在尝试为图像设置动画，使其以自身为中心。这是我想使用的代码：
$('#myImage').animate({'margin-right': 'auto'});
But when I do that, it's ignored and doesn't change the margin.
Is there a way to animate a margin to auto, or otherwise center an image?
但是当我这样做时，它会被忽略并且不会改变边距。
有没有办法将边距动画化为自动，或者以其他方式将图像居中？
Thanks!
谢谢！
回答by nsdel
As 'auto' isn't a number, jQuery cannot animate it.
由于 'auto' 不是数字，jQuery 无法为其设置动画。
If you are okay with taking the image out of the flow of the document, you can set position to absolute or fixed and try:
如果您可以将图像从文档流中取出，您可以将位置设置为绝对或固定并尝试：
$('#myImage').animate({'left': '50%', 'margin-left': -$('#myImage').width()/2 });
回答by Josiah Ruddell
You cannot animate an autoproperty. To properly animate the element to the center of the screen you will need to position it absolutely(or other) and then calculate the screen size, element size, and scroll position. Here is a another SO answeron something similar. Here is the Fiddle
您不能为auto属性设置动画。要将元素正确地设置为屏幕中心的动画，您需要定位它absolutely（或其他），然后计算屏幕大小、元素大小和滚动位置。这是关于类似问题的另一个 SO 答案。这是小提琴
jQuery.fn.center = function () {
this.css("position","absolute");
var top = ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px",
left = ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px";
this.animate({top: top, left: left});
return this;
}
Alternatively if you only want the horizontal alignment you can remove the top from the animate function. And if you really want to get creative you can remove the position:absolute, and reposition margin:autoafter the animation in case of screen resizing. See another fiddle.
或者，如果您只想要水平对齐，您可以从 animate 函数中删除顶部。如果您真的想发挥创意，您可以删除position:absolute, 并margin:auto在屏幕调整大小的情况下在动画后重新定位。参见另一个小提琴。
jQuery.fn.center = function () {
this.css("position","absolute");
var left = ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px";
this.animate({left: left}, function(){
$(this).css({position: 'static', margin: '0 auto'});
});
return this;
}
$('#selector').center();
回答by B. Kwok
Expanding on Josiah Ruddell's answer. If you guys need your image to keep its flow in the document, use this modified version of Josiah's answer. My image was originally positioned at margin: 0 -1000px, and slides in to the calculated margin left and right. While keeping its flow in the dom the whole time
扩展 Josiah Ruddell 的回答。如果你们需要你的图像在文档中保持流畅，请使用 Josiah 答案的这个修改版本。我的图像最初位于margin: 0 -1000px，并滑入计算出的左右边距。同时保持其在 dom 中的流动
jQuery.fn.center = function () {
var margin = ( $(window).width() - this.width() ) / 2;
this.animate({
marginLeft: margin,
marginRight: margin
}, function(){
$(this).css({margin: '0 auto'});
});
return this;
}
