Question

我正在尝试为图像设置动画，使其自身居中。这是我想要使用的代码：

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

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

谢谢！

Answer 1

由于'auto'不是数字，jQuery无法为其设置动画。

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

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

Answer 2

您无法为auto属性设置动画。要将元素正确地设置为屏幕中心的动画，您需要将其定位absolutely（或其他），然后计算屏幕大小，元素大小和滚动位置。这是类似的another SO answer。 Here is the Fiddle

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以防屏幕大小调整。 See another fiddle

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

jQuery：Animate Margins to Auto？

3 个答案: