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, вы не назначили left для элемента вначале. Таким образом, он будет принимать left как 0 по умолчанию. Итак, теперь вы пытаетесь сделать animate слева на 100, очевидно, ваш элемент будет двигаться вправо, чтобы перейти от 0 to 100. Попробуйте установить начальную левую позицию для вашего элемента.

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

Answer 2

Чтобы начать с left позиции .animate-rectangle будет 0, или значение его left это ближайший родственник родителя. Анимация перемещает его вправо, потому что значение 100 больше, чем исходная точка. Если вы хотите, чтобы переместить его 100px вправо относительно туда, где он начинает использовать +=100px:

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