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 的顶部锚点。

在 Chrome 和 IE 中，似乎正在发生的事情是 element 从顶部的 0px 滑动到顶部的 50px，因此它非常短。如果我删除 element 的 jQuery 动画，它的位置是 -1000 像素（我认为，它不在屏幕上，所以我认为它就是它所在的位置）。

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

Answer 1

您应该始终只操作top 或bottom 之一。现在你的CSS设置bottom然后你的动画改变top。由于这两者显然不是独立的，如果你只设置和操纵其中一个，你将更有可能获得一致性。如果您没有为top 设置值，那么javascript 动画可能会得到一个不一致的top 起始值，动画将从该值开始。在某些浏览器中它可能会以auto 的形式返回，而在其他浏览器中可能会返回为一些数值。如果您不依赖未设置的值，则可以绕过整个不一致。

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