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

问题描述：

<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放在一个数组中，以便于操作，但我无法弄清楚。如何将顶部div移动到堆栈的底部

你说你成功消除和追加它已经 - 你能告诉我们你试过什么，什么不适用它？ – Armatus 2012-04-18 00:05:59

答

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

LIVE DEMO

应该指出的是，那些“我需要一行代码来做到这一点”的要求是愚蠢的。

答

在这里你去： http://jsfiddle.net/V5bkC/

我平时动画项目的高度就淡出后，但我会离开的那部分给你:)

答

gdoron行不通的，轻微的调整。

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

哦，:)只是修复了我的答案。我在jsFiddle中看到了这个问题.. – gdoron 2012-04-18 00:19:10

对不起，忘记了upvote你。 – gdoron 2012-04-18 00:36:02

答

如果追加一条已经在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移动到堆栈的底部

相关推荐