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 的第一个孩子并将其附加到一个链中的最后一个孩子的一种方式吗？示例 div 1 淡出然后附加到 div 3 并淡入我只能将第一个孩子从顶部移除或附加到最后一个孩子，但我不能一次加载。我还尝试将 div 放在一个数组中以使其更易于操作，但我无法弄清楚。

Answer 1

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

现场演示

需要注意的是，那些“我需要用一行代码完成”的要求是愚蠢的。

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/