jquery - トップ div をスタックの一番下に移動する方法

Question

<div>                       <div>
 <div>1</div>  ------------  <div>2</div> 
 <div>2</div>  -transition-  <div>3</div>
 <div>3</div>  ------------  <div>1</div>
</div>                      </div>

jqueryでdivの最初の子を削除し、それを1つのチェーンの最後の子に追加する方法はありますか? 例 div 1 がフェードアウトし、div 3 に追加され、フェードインします。最初の子を一番上から削除するか、最後の子に追加することしかできませんが、1 回の読み込みでそれを行うことはできません。また、操作を簡単にするためにdivを配列に入れてみましたが、わかりません。

Answer 1

$('div > div').first().fadeOut(500, function() {
    $(this).appendTo($(this).parent()).fadeIn();
})​;

ライブデモ

「1行のコードでそれを行う必要がある」という要件はばかげていることに注意してください。

Answer 2

gdoron は機能しません。微調整します。

$('div > div').first().fadeOut('slow', function() {
  $(this).appendTo($(this).parent()).fadeIn(); 
});​

Answer 3

どうぞ： http： //jsfiddle.net/V5bkC/

通常、フェードアウトした後、アイテムの高さをアニメーション化しますが、その部分はあなたに任せます:)

Answer 4

DOM に既に存在する要素を追加すると、現在の位置から自動的に削除されるため、.fadeOut() の完全なコールバックで単純に削除します。

var $first = $("div div").first();
$first.fadeOut(500, function() {
   $first.appendTo($first.parent()).fadeIn(500);
});

デモ: http://jsfiddle.net/tfEMq/

上記を関数に入れると、コールバックを .fadeIn() に追加することで継続的に実行できます: http://jsfiddle.net/tfEMq/1/