IE、Chrome 中的 Jquery 问题，但 FF 中没有答案

【问题标题】：Jquery issue in IE, Chrome but not in FFIE、Chrome 中的 Jquery 问题，但 FF 中没有
【发布时间】：2011-09-26 15:06:31
【问题描述】：

一段 Jquery 代码有一些问题，这就是我认为问题所在 - 在 FF 上，当页面在 2 秒后加载时，它会从屏幕左侧到右侧为面板设置动画。它看起来很好，没有任何问题，但在 Chrome 和 IE 中它会跳回并继续移动。

这里是代码 -

<script type="text/javascript" language="javascript">

$(function() {

   // Display div slowly
    $('#one').delay(2000).show('slow');
    $("#one").animate({
        left: '+=159'
    }, 3000);


    $('#two').delay(3000).show('slow');
    $("#two").animate({
        left: '+=159'
    }, 3000);

    $('#three').delay(4000).show('slow');
    $("#three").animate({
        left: '+=159'
    }, 3000);

    $('#four').delay(5000).show('slow');
    $("#four").animate({
        left: '+=159'
    }, 3000);
    });

 </script>

这是页面预览 - http://www.visrez.com/preview/och-group/

P.S 我不排除这是一个 CSS 问题...

提前感谢您的帮助！

Gearóid

【问题讨论】：

脚本示例显示 OP 正在使用文档就绪结构，只有简写 $(function(){}); 所以这不是问题
@Gearóid：我猜是浏览器问题，您需要更改脚本。请检查此线程； stackoverflow.com/questions/7455831/…
@sander, @ Karthik rangaraj 感谢您的建议。我已经通过改变布局将它固定到一个点。现在在 ie8、chrome 和 FF 中都很好，但 ie7 玩得不好。我看看能不能自己解决，再次感谢。

标签： jquery internet-explorer firefox google-chrome

【解决方案1】：

问题源于 Chrome 在开始移动之前没有考虑 div 在页面上的位置（相对于偏移父级）。所以，一旦动画，它的值是left: 159px，它是相对于身体的。 Firefox 考虑到原来的位置，以left: 256px 结尾。

我还没有调查为什么会发生这种情况，但这里有一些你可以做的事情（解决方法）：

在制作动画之前，确定相对于偏移父级的位置并设置 CSS top 和 left 属性。然后，希望最终值是您设置的值加上 159 像素。比如：
```
var offset = $("#one").offset();
$("#one").css({"top": offset.top, "left": offset.left});
// animate
```
将#oneTop 和#one 包装在一个div 中，即position: relative。这会将动画 div 的偏移父级设置为 position: relative div。这样 +159px 相对于 div 在文档中的位置。

【讨论】：

【解决方案2】：

我用你的代码准备了一个演示并且有效。

http://jsfiddle.net/AjDLS/2/

我没有你的问题，所以我认为你一定有其他一些 javascript 问题或 css 问题，你能发布更多代码吗？

【讨论】：

感谢 Sander 的帮助，我将采取不同的方法。