javascript - chrome 和 opera 中的 jquery 位置动画问题

Question

所以我有一个带有以下 css 的 div:

#MyDiv {
    position: absolute;
    overflow: visible;
    top: 0px;
    right: 50%;
    width: 49%;
    height: 99%;
    min-width: 250px;
    min-height: 400px;
    max-width: 400px;
    max-height: 500px;
    background-color: #FFFFFF;
    border: 1px solid #000000;
    margin: 0 auto;
    padding: 0px;
}

我正在使用 jquery 将其设置为向右移动 800 像素的动画。在 Firefox 中，最终位置是所需的位置，但在 Chrome 和 Opera 中，它是错误的。

    alert($("#MyDiv").position().left);
    $("#MyDiv").animate({left: "+=" + 800 + "px"}, 1000, "linear", function() {
        alert($("#MyDiv").position().left);
    });

在 firefox 中，左边的初始位置是 23(第一次警报)，最后的 823(第二次警报)在 chrome 和 opera 中最终位置是 800

我做错了什么吗？要求保持 css 不变。

附注ie8 也有一些问题，但程度低于 chrome 和 opera

提前致谢。

编辑 jsfiddle : http://jsfiddle.net/Q8K2R/

Answer 1

另一种方法是设置 css left 属性，因为动画与 css 一起工作，这里不保证，left 属性包含正确的计算数据，所以 fix 可以像

var mydiv=$("#MyDiv");
mydiv.css({left: mydiv.position().left});

动画之前 DEMO