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动画，它的位置为-1000px（我认为，它不在屏幕上，因此我假设它在此处）。

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

Answer 1

您应该始终只操作top或bottom 。 现在，您的CSS设置为bottom ，然后动画变为top 。 由于这两个显然不是独立的，因此，如果仅设置和操作其中一个，则更有可能获得一致性。 当您尚未为top设置值时，那么javascript动画可能会获得一个不一致的top起始值（该动画将从其开始）。 在某些浏览器中可能会auto返回，而在其他浏览器中会返回一些数值。 如果您不依赖尚未设置的值，则可以绕过整个不一致的地方。

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