jQuery .animate命令问题

Question

我正在使用jQuery的animate命令，由于某些原因，这不起作用：

$('#my_div_id').animate({left:'calc(50% + 50px)'}, 1000);

有没有办法解决这个问题？

我知道代码可以工作，如果我把'50％'或'50px'，但我想让我的div动画到屏幕的50％+ 50px。

提前致谢！

Answer 1

似乎calc无法动画，但幸运的是，由于您拥有JavaScript的强大功能，因此您可以轻松计算屏幕宽度的50％。

$("#my_div_id").animate({left: $("body").width() / 2 + 50 + "px"}, 1000);

这假定#my_div_id相对于body定位（即没有相对位置的祖先 - 否则你必须使用它）。

Answer 2

基本上没什么新东西，但是使用提问者的显式请求，将其设置为屏幕宽度的50％：

var width = screen.width / 2 + 50;
$('#my_div_id').animate({left: width + "px"}, 1000);