Question

目前我正在不同浏览器中测试我的网页以获得兼容性，但是，我在Chrome中使用jQuery animate()（使用SRWare Iron）和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（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。

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

1 个答案: