chrome和opera中的jquery位置动画问题答案

【问题标题】：jquery position animation issue in chrome and operachrome和opera中的jquery位置动画问题
【发布时间】：2013-01-28 21:44:15
【问题描述】：

所以我有一个带有以下 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/

【问题讨论】：

使用 console.log() 处理这些事情
jsfiddle.net/oceog/5A2Nm 在 chrome 中按预期工作，你能做这个演示来重复这个问题吗？
jsfiddle.net/Q8K2R initial pos 3 final 800, 应该是 803
是的，应该是 804.3xxx
@eicto 甚至您在 chrome 中的演示也从 -2 变为 800。chrome 24

标签： javascript jquery css animation html

【解决方案1】：

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

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

动画之前 DEMO

【讨论】：

【解决方案2】：

为什么不在动画样式之前计算位置：

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

【讨论】：

可能是唯一的解决方案，顺便说一句，在 jQuery 中，做动画时不需要 'px'