javascript - jQuery .animate 为什么会出错？

Question

这是我的CSS：

.animate-rectangle {
    background-color:#0F0;
    border: 1px solid #FFF;
    float:left;
    position:absolute;
    width:100px;
    height:100px;
}

和 jQuery 代码：

<!--Jquery Code to Animate Rectangle from Left to Right-->
$(document).ready(function () {

    var windo_width = $(document).width() - 300;

    $("#reset").click(function () {
        $(".animate-rectangle").animate({
            "left": "100px"
        }, "slow");
    });

    $("#MoveRight").click(function () {
        $(".animate-rectangle").animate({
            "left": "+=" + windo_width
        }, "slow");
    });

});

查看它声明的 jQuery 代码，animate({"left":"100px"}但实际上它是正确的，为什么会发生这种情况？

Answer 1

在查看您的css时，您最初没有为元素分配 a left。left因此默认情况下会采用它0。所以现在你正试图animate向左移动100，显然你的元素会向右移动以从 移动0 to 100。尝试为您的元素设置初始左侧位置。

  ***    ------>         ***
  ***                    *** 
  |                      |
  |                      |
  left : 0               left: 100

Answer 2

从will的left位置开始，或者它最接近的相对父级的值。动画将其向右移动，因为 的值大于其原点。如果要将其相对于开始位置向右移动，请使用：.animate-rectangle0left100100px+=100px

$("#reset").click(function () {
    $(".animate-rectangle").animate({
        "left": "+=100px"
    }, "slow");
});