jQuery：将边距动画化为自动？

Question

我正在尝试对图像进行动画处理，使其居中。这是我想使用的代码：

$('#myImage').animate({'margin-right': 'auto'});

但是当我这样做时，它会被忽略并且不会改变边距。
有没有办法将边距设置为自动动画，或以其他方式使图像居中？

谢谢！

Answer 1

由于“auto”不是数字，因此 jQuery 无法为其设置动画。

如果您同意将图像从文档流中取出，您可以将位置设置为绝对或固定，然后尝试：

$('#myImage').animate({'left': '50%', 'margin-left': -$('#myImage').width()/2 });

Answer 2

您无法为 auto 属性设置动画。要正确地将元素设置为屏幕中心的动画，您需要将其绝对定位（或其他），然后计算屏幕大小、元素大小和滚动位置。这是另一个所以回答类似的问题。 这是小提琴

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

或者，如果您只想要水平对齐，您可以从动画功能中删除顶部。如果您确实想发挥创意，可以删除 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();

Answer 3

扩展乔赛亚·鲁德尔的答案。如果你们需要图像在文档中保持流畅，请使用 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;
}