jQuery 动画问题 chrome vs Mozilla

Question

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

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

#nav div

position:absolute;
bottom:-70px;

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

Answer 1

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

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

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

http://jsfiddle.net/zmrC5/

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

http://jsfiddle.net/zmrC5/1/

Chrome 将返回“auto”，而 firefox 返回计算的最高值。