jQuery animate（）在Firefox和Chrome/IE中不同

问题描述：

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

我用下面的代码：

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（极光）中，element从屏幕底部（-1000像素）滑动到顶部像素为50像素。

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

有没有人有任何想法？我正在使用它制作动画的其他元素在FF/IE/Chrome中正常工作。

我想这是因为动画试图从当前设置值为顶部进行动画。如果没有设置，它可以被浏览器设置为“0”，这将具有比底部值更高的优先级。如果您使用“top：1000px”，会发生什么情况？而不是“底部：-1000像素;”。这只是一个猜测，因为我从手机上写下来，无法测试它。 – insertusernamehere 2012-07-11 00:24:23

我将'bottom：-1000px'改为'top：1900px'，它可以工作！ – John 2012-07-11 01:03:58

答

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

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

谢谢！这帮了很多。我用你的和insertusernameheres答案来修复它，将'bottom：-1000px'更改为'top：1900px'使它更好，更平滑。 – John 2012-07-11 01:03:01

jQuery animate（）在Firefox和Chrome/IE中不同

相关推荐