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

Question

所以我有一个带有计算位置的变量,它使元素与JQuery居中,我之所以这样做是因为我不知道元素的宽度,所以我把它变成动态的.

var $x = $("#line").outerWidth();

var $result = "calc( 50% - " + $x +"px / 2 )";

然后我尝试将它设置为中心($ result的值),如下所示:

   $("#line").animate({ 
        "left": $result,
        "top" : "15px"

    }, 1000 );

可悲的是,这不起作用,只有最重要的价值.

非常感谢任何建议,谢谢.

Answer 1

jsBin 演示

如果你已经使用了calc(CSS3) 那么你就不会反对在你的 CSS 中使用：

使用 CSS3transition和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 演示（跨浏览器解决方案）