所以我有一个带有计算位置的变量,它使元素与JQuery居中,我之所以这样做是因为我不知道元素的宽度,所以我把它变成动态的.
var $x = $("#line").outerWidth();
var $result = "calc( 50% - " + $x +"px / 2 )";
然后我尝试将它设置为中心($result的值),如下所示：
$("#line").animate({
"left": $result,"top" : "15px"
},1000 );
可悲的是,这不起作用,只有最重要的价值.
非常感谢任何建议,谢谢.
最佳答案
jsBin demo
如果你已经使用了calc(CSS3),那么你将无法在CSS中使用它：
使用CSS3过渡和calc()
#line{
transition: 1s;
/*...other stuff...*/
}
并在你的jQuery(而不是.animate())
var outW2 = $("#line").outerWidth() / 2;
$("#line").css({
left : "calc(50% - "+ outW2 +"px)",top : 70
});
使用.animate()和负边距(用于居中)
对于所有旧版浏览器,您可以像以前一样使用.animate(),
将元素移动到50％,但也移动到半边宽左边距(使其居中)：
var outW2 = $("#line").outerWidth() / 2;
$("#line").animate(){
left: "50%",marginLeft : -outW2
},1000);
jsBin demo(crossbrowser解决方案)
