Question

对于一段Jquery代码有一些问题，那就是我认为问题所在 - 在页面加载2秒后的FF上，它会将屏幕左侧的面板设置为向右动画。它没有任何问题看起来很好，但在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

Answer 1

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

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

我没有你的问题，所以这让我觉得你必须有一些其他的javascript问题，或者css问题，你能发布更多代码吗？

Answer 2

问题源于Chrome在您开始移动之前未考虑div在页面上的位置（相对于偏移父级）的事实。因此，一旦动画，它的值为left: 159px，它与身体相关。 Firefox正在考虑原始位置，并以left: 256px结束。

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

在设置动画之前计算出相对于偏移父项的位置，并设置CSS top和left属性。然后，希望最终值将是您设置的值加上159px。类似的东西：
```
var offset = $("#one").offset();
$("#one").css({"top": offset.top, "left": offset.left});
// animate
```
将#oneTop和#one以及每个其他对包裹在position: relative的div中。这会将动画div的偏移父级设置为position: relative div。这样，+ 159px相对于div在文档中的位置。

IE浏览器中的Jquery问题，Chrome但不是FF

2 个答案: