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");
    });

});

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

Answer 1

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

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

Answer 2

从left的{{1}}位置开始将是.animate-rectangle，或者是0的最近亲属的left值。动画将其移动到右侧，因为100的值大于其原点。如果您想将其100px向相对于其开始位置向右移动，请使用+=100px：

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

jQuery .animate出错的方向为什么？

2 个答案: