jquery在Chrome和Opera中的位置动画问题

jquery position animation issue in chrome and opera

本文关键字：位置 动画 问题 Opera Chrome jquery      更新时间：2023-09-26

所以我有一个带有以下 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像素。在火狐中，最终位置是所需的位置，但是在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/

另一种方法是设置 css left属性，因为动画适用于 css，这里没有保证，该 left 属性包含正确的计算数据，因此修复可以像

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

动画制作之前演示

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

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