javascript - 为什么这段 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