如何將第一個孩子移動到最後？

我在div容器中有一些div項目，我想連續動畫它們。如何將第一個孩子移動到最後？

我知道如何在無限循環中運行我的函數，但是在選擇第一個div之後出現問題，在動畫完成後將其動畫並將其移動到最後。

我的功能看起來是這樣的：

function MoveItems() { 
     $(".container:first").animate(
      {width: "0px"}, 
      1000, 
      function(){ 
       $('.container').append($(this)); 
       $('.container').remove($(this)); 
      } 
     ); 
};

什麼，我做錯了什麼？ ;/

編輯：

你說得對，刪除，但動畫仍然不能正常工作。

我認爲選擇器不能正常工作。

我的HTML是：

<div class="container"> 
<div class="image"><a href=""><img src="img/image001.jpg" /><span>IMAGE001</span></a></div> 
<div class="image"><a href=""><img src="img/image002.jpg" /><span>IMAGE002</span></a></div> 
<div class="image"><a href=""><img src="img/image003.jpg" /><span>IMAGE003</span></a></div> 
    <div class="image"><a href=""><img src="img/image004.jpg" /><span>IMAGE004</span></a></div> 
</div>

但運行功能MoveItems後，一旦有：

<div class="container" style="width: 0px; overflow: hidden;"> 
    <div class="image"><a href=""><img src="img/image001.jpg"><span>IMAGE001</span></a></div> 
    <div class="image"><a href=""><img src="img/image002.jpg"><span>IMAGE002</span></a></div> 
    <div class="image"><a href=""><img src="img/image003.jpg"><span>IMAGE003</span></a></div> 
    <div class="image"><a href=""><img src="img/image004.jpg"><span>IMAGE004</span></a></div> 
</div>

這樣的功能是在.container容器不是第一個孩子操作。我在這裏更specyfic？ :)

來源

2011-03-29 lucaste

到底是什麼問題？ – teuneboon 2011-03-29 23:17:37

http://api.jquery.com/append/你不需要刪除。 – 2011-03-29 23:18:45

@repas，你可能已發佈爲答案 – kobe 2011-03-29 23:20:33

$(".container:first")選擇找到的第一個.container。

你想$(".container>div:first")

您也可以「加速」最終刪除/於父操作而不是做了.container另一個DOM搜索附加：

var $me = $(this); 
$me.parent().append($me);

來源

2011-03-30 00:34:33 Brandon

列維莫里森上了一課，但這是對我的功能有幫助的一條線。 TY。 – lucaste 2011-03-31 08:10:05

刪除此行：

$('.container').remove($(this));

追加（）不創建副本，它移動選定對象從當前位置到目標的端部。

來源

2011-03-29 23:17:33

append自動將孩子從父母中移除並將其放在最後。 remove將再次刪除該孩子，而不用重新添加。

剛落線：$('.container').remove($(this));

來源

2011-03-29 23:18:22 zzzzBov

這是一個很好的提示，但仍然無法正常工作。謝謝 – lucaste 2011-03-30 00:36:00

這裏有一個更實際的例子：http://jsfiddle.net/8KyCD/1/

它創建了一個jQuery插件，讓你可以動畫任何元素上的項目。我沒有將它設置爲循環，如你所說，你已經知道如何做到這一點;）

編輯：這裏的隱藏元素，然後顯示它的另一個例子，永遠地重複：http://jsfiddle.net/8KyCD/5/(documented code)

來源

2011-03-29 23:54:34

這很神奇。它正在工作，但我真的不明白這一點。 :) 當鼠標懸停時，我必須停止動畫，所以我應該使用我的循環。幹得好！偉大的工具這jsfiddle。 – lucaste 2011-03-30 00:55:16

我會用一些註釋加一個例子並添加鼠標懸停的東西。給我一點時間'這不會，夥伴。 – 2011-03-30 06:53:34

我最初誤解你的評論。我留下了相同的功能，但http://jsfiddle.net/8KyCD/9/對我所做的事情有評論。我很高興我可以向你介紹jsfiddle :)不要忘了接受其中一個答案作爲你的回答;） – 2011-03-30 07:06:44

如何將第一個孩子移動到最後？

回答

相關問題