jQuery问题: moving a from one to the top of another

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。我尝试向第二个 UL 添加一个 id 并将其用作 insertBefore 中的参数。每个结果都是相同的:

-LI 消失并被相同内容取代，但无样式- 新内容逐渐消失，可能是因为 fadeOut 效果尚未完成。

我哪里出错了？

谢谢...

Answer 1

试试这个:

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

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