jQuery问题：将从一个移动到另一个的顶部

I have two ULs, one above the other:

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

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

In the first, each LI has a button that, when clicked, removes the LI and bumps the below LIs up one space to fill in the gap. It works fine. But I want the clicked LI to simultaneously be added to the top of the next UL, so that it becomes the first item in the bottom list. Right now, I'm trying this with:

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

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

I've also tried using prependTo instead of insertBefore. And I've tried adding an id to the second UL and using it as the argument in insertBefore. The result for each is the same:

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

-the LI disappears and is replaced by the same content, but unstyled -the new content fades away, presumably because the fadeOut effect hasn't finished.

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

Where have I gone wrong?

我哪里出错了？

Thanks...

谢谢...

2 个解决方案

#1

Try this out:

试试这个：

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

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

#2

Yeah. since you didn't clone the element it is removed when the animation finishes. You should perform the prepend in the animation callback to keep that action synchronous.

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

Try this:

尝试这个：

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

#1