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();
});

LIVE DEMO

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

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/

如何将顶部div移动到堆栈的底部

4 个答案: