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

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