javascript– 如何使用JQuery为计算位置设置动画

概述所以我有一个带有计算位置的变量,它使元素与JQuery居中,我之所以这样做是因为我不知道元素的宽度,所以我把它变成动态的.var $x = $('#line').outerWidth(); var $result = 'calc( 50% - ' + $x +'px / 2 )'; 然后我尝试将它设置为中心($result的值),如下所示： $('#l

所以我有一个带有计算位置的变量,它使元素与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解决方案) 总结

以上是内存溢出为你收集整理的javascript – 如何使用JQuery为计算位置设置动画全部内容，希望文章能够帮你解决javascript – 如何使用JQuery为计算位置设置动画所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。