jsFiddle（稍微修改後的值使其正確顯示）。爲什麼這個jQuery代碼不能移動到正確的位置？

我想在我的頁面上移動一些div的位置。

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

該divs水平顯示，每個之間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>

上午什麼我做錯了？

來源

2011-02-23 ben

你需要相對定位它。

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

demo

來源

2011-02-23 09:57:17 Reigel

編輯您的提琴：http://jsfiddle.net/PsQBD/1/

應該

margin-left: +=500

沒有像素。

來源

2011-02-23 09:50:25 corroded

注意一下，在OP使用'left'而不是'保證金left'。 px不是這裏的問題。你的演示甚至連px，[它的作品]（http://jsfiddle.net/reigel/PsQBD/4/） – Reigel 2011-02-23 09:58:21

爲什麼這個jQuery代碼不能移動到正確的位置？

回答

demo

相關問題