jquery - jQuery问题：移动一个从一个到另一个顶部

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 消失并被相同的内容替换，但没有样式 - 新内容消失，大概是因为淡出效果尚未完成。

我哪里出错了？

谢谢...

Answer 1

试试这个：

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

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

Answer 2

是的。因为您没有克隆动画完成时将其删除的元素。您应该在动画回调中执行 prepend 以保持该动作同步。

尝试这个：

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