2

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

我正在使用以下代码：

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，所以它非常短。如果我删除 jQuery animate for element，它的位置是 -1000px （我认为，它不在屏幕上，所以我认为它就在那里）。

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

4

1 回答 1

4

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

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

于 2012-07-11T00:23:50.977 回答