如何使用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 demo

如果你已经使用calc（CSS3）而不是在CSS中使用它，那么

使用CSS3 transition和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解决方案）

Answer 2

jQuery的animate不会接受css3 calc作为有效像素值。您需要先计算50%是什么。

var containerWidth = $("#line").parent().outerWidth();

然后在$result中使用它。

var $result = containerWidth * 0.5 - $x * 0.5;

这应该为您提供水平像素位置以将其设置为动画。