Question

我遇到了一个我想要制作动画的div的问题。在mozilla中，当我运行下面的代码时，我会从页面底部到页面顶部的#nav div动画。当我在chrome或safari中运行相同的代码时，它跳转到浏览器窗口的顶部并动画下来52px。你知道为什么会这样吗？

 $("#nav").animate({'top': 52}, 2000);

#nav div

position:absolute;
bottom:-70px;

第一个onclick事件从页面底部触发其部分外观。第二次onclick触发它从页面底部移动到页面顶部。

Answer 1

这似乎是因为您正在为没有top集的元素的top设置动画。您可以通过在animate之前设置top来解决此问题：

var $this = $("#nav");

$this.css("top", $this.position().top);
$(this).animate({"top": 0}, 1000);

编辑：差异是由于浏览器在检查没有顶部设置的元素的top值时返回的结果不同。你可以从这个小提琴看到这个：

Chrome会返回＆＃34;自动＆＃34;而firefox返回计算出的最高值。