jQuery problem: moving a <li> from one <ul> to the top of another

Question

I have two ULs, one above the other:

<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.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:

-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.

Where have I gone wrong?

Thanks...

Answer 1

Try this out:

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

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

Answer 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');});