所以我有一个带有计算位置的变量,它使元素与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解决方案)
原文地址:https://www.jb51.cc/html/426179.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。