我如何用JQuery动画计算位置

How can I animate a calculated position with JQuery

本文关键字：计算 位置 动画 JQuery 何用      更新时间：2023-09-26

所以我有一个计算位置的变量，用JQuery来居中元素，我这样做的原因是我不知道元素的宽度，所以我把它做成动态的，像这样

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

然后我尝试将它动画到中心($result的值)，像这样:

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

遗憾的是，这不起作用，只有顶部的值移动。

任何建议都非常感谢，谢谢。

jsBin演示

如果你已经使用了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演示 (crossbrowser解决方案)

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

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

然后在你的$result中使用。

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

这应该会给你水平像素的位置，使其动画

相关文章：