我正在尝试为图像设置动画,使其自身居中。这是我想要使用的代码:
$('#myImage').animate({'margin-right': 'auto'});
但是当我这样做时,它会被忽略并且不会改变边距。
有没有办法将边距动画为自动或以图像为中心?
谢谢!
答案 0 :(得分:11)
由于'auto'不是数字,jQuery无法为其设置动画。
如果您可以将图像从文档流中取出,可以将位置设置为绝对或固定并尝试:
$('#myImage').animate({'left': '50%', 'margin-left': -$('#myImage').width()/2 });
答案 1 :(得分: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();
答案 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;
}