javascript - Firefox 和 Chrome/IE 中的 jQuery animate() 不同

Question

目前，我正在不同浏览器中测试网页的兼容性，但是，我在 Chrome(使用 SRWare Iron)和 IE 中的 jQuery animate() 遇到了问题。

我使用以下代码:

jQuery

$('.element').animate({top:"50px"}, 1400);

HTML

<h1 class="element">testing text slide</h1>

CSS

body {
    overflow: hidden;
}
h1 {
    margin: 0;
}
    .element {
    position: absolute;
    bottom: -1000px;
    left: 50px;
    font: bold 72px Arial, sans-serif;
}  

我遇到的问题是，在 Firefox (Aurora) 中，element 从屏幕底部 (-1000px) 滑动到 50px 的顶部 anchor 。

在 Chrome 和 IE 中，似乎发生的情况是 element 从顶部的 0px 滑动到距顶部 50px，所以它非常短。如果我删除 element 的 jQuery 动画，它的位置为 -1000px(我认为，它不在屏幕上，所以我假设它就在那个位置)。

有人有什么想法吗？我用它制作动画的其他元素在 FF/IE/Chrome 中可以正常工作。

Answer 1

您应该始终只操作top 或bottom 之一。现在，您的 CSS 设置了 bottom，然后您的动画更改了 top。由于两者显然不是独立的，因此如果仅设置和操作其中之一，则更有可能获得一致性。如果您尚未为 top 设置值，则 JavaScript 动画可能会获得与动画起始位置不一致的 top 起始值。在某些浏览器中它可能会返回为 auto，而在其他浏览器中可能会返回一些数值。如果您不依赖于尚未设置的值，则可以绕过整个不一致问题。

由于您的 CSS 设置为 bottom，我建议您也为 bottom 设置动画，而不是 top。