jQuery问题：将<li>从一个<ul>移到另一个</ul> </li>的顶部

Question

我有两个UL，一个在另一个之上：

<ul id="one">
  <li>
  <li>
<ul>
<div id="div_for_second_UL">
  <ul>
   <li>
  </ul>
</div>

在第一个中，每个LI都有一个按钮，当单击该按钮时，移除LI并将下面的LI碰撞到一个空间以填充间隙。它工作正常。但我想将点击的LI同时添加到下一个UL的顶部，以便它成为底部列表中的第一个项目。现在，我正在尝试这个：

        li.fadeOut(500, function() {$(li).remove(); });
        li.insertBefore('#div_for_second_UL');

我也尝试过使用prependTo而不是insertBefore。我已经尝试将id添加到第二个UL并将其用作insertBefore中的参数。每个结果都是一样的：

- LI消失并被相同的内容取代，但没有样式 - 新内容逐渐消失，大概是因为fadeOut效果还没有结束。

我哪里出错？

...谢谢

Answer 1

试试这个：

li.fadeOut(500, function() {
     li.prependTo('#div_for_second_UL ul').fadeIn(); 
});

http://jsfiddle.net/Nf84m/1/

Answer 2

呀。因为你没有克隆元素，所以当动画结束时它会被删除。您应该在动画回调中执行前置以使该操作保持同步。

试试这个：

li.fadeOut(500, function() {li.prependTo('#div_for_second_ul ul');});