Why doesn't this jQuery code moving divs to the right?
<p><a href="http://jsfiddle.net/PsQBD/" rel="nofollow">jsFiddle</a> (with slightly modified values so it appears correctly).</p>

<p>I am trying to move the position of some divs on my page.</p>

<pre><code>div.note {float:left;width:666px;  padding:0 0 0 50px;}
div.first_note {margin-left: 565px;}
</code></pre>

<p>The divs are horizontally displayed, with 50px between each one.</p>

<pre><code>&lt;div id="note-1" class="note first_note"&gt;
    note display here
&lt;/div&gt;
&lt;div id="note-2" class="note"&gt;
    note display here
&lt;/div&gt;
&lt;div id="note-3" class="note"&gt;
    note display here
&lt;/div&gt;
</code></pre>

<p>This is the moving code:</p>

<pre><code>$('.note').animate({"left": "+=500px"}, "slow");
</code></pre>

<p>When this is run, the notes don't move at all, but the HTML changes to this:</p>

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

<p>What am I doing wrong?</p>
