jQuery:Animate Margins to Auto?

时间:2010-12-22 16:02:31

标签: javascript jquery css jquery-animate center

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

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

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

谢谢!

3 个答案:

答案 0 :(得分:11)

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

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

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

答案 1 :(得分:2)

您无法为auto属性设置动画。要将元素正确地设置为屏幕中心的动画,您需要将其定位absolutely(或其他),然后计算屏幕大小,元素大小和滚动位置。这是类似的another SO answerHere 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();

答案 2 :(得分:0)

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