为什么这个jQuery代码没有向右移动div？

Question

jsFiddle（略有修改后的数值，以便正确显示）。

我试图在我的页面上移动一些div的位置。

div.note {float:left;width:666px;  padding:0 0 0 50px;}
div.first_note {margin-left: 565px;}

div是水平显示的，每个div之间有50px。

<div id="note-1" class="note first_note">
    note display here
</div>
<div id="note-2" class="note">
    note display here
</div>
<div id="note-3" class="note">
    note display here
</div>

这是移动代码：

$('.note').animate({"left": "+=500px"}, "slow");

运行此操作时，笔记根本不会移动，但HTML会更改为：

<div id="note-1" class="note first_note" style="left: 500px;">
    note display here
</div>
<div id="note-2" class="note" style="left: 500px;">
    note display here
</div>
<div id="note-3" class="note" style="left: 500px;">
    note display here
</div>

我做错了什么？

Answer 1

你需要相对定位。

div.note {
    float:left;width:60px;  
    padding:0 0 0 50px;
    position: relative;
}

demo

Answer 2

编辑你的小提琴：http://jsfiddle.net/PsQBD/1/

应该是

margin-left: +=500

没有px。