problema jQuery: mover un de un a la parte superior de otro

Question

Tengo dos ULs, una encima de la otra:

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

En la primera, cada LI tiene un botón que, al hacer clic, elimina la LI y golpes Lis continuación de hasta un espacio a llenar el vacío. Funciona bien. Pero quiero que el LI hecho clic a añadir simultáneamente a la parte superior de la siguiente UL, por lo que se convierte en el primer elemento de la lista inferior. En este momento, estoy tratando esto con:

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

También he intentado usar Prefijopara en lugar de insertBefore. Y he intentado añadir un identificador a la segunda UL y usarlo como argumento en insertBefore. El resultado para cada uno es el mismo:

-la LI desaparece y se sustituye por el mismo contenido, pero sin estilo -el nuevo contenido se desvanece, presumiblemente debido a que el efecto fadeOut no ha terminado.

he

Donde ido mal?

Gracias ...

Answer 1

Trate de hacer esto:

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

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

Answer 2

Sí. ya que usted no clonar el elemento se elimina cuando termina la animación. Debe realizar la anteponer en la devolución de llamada de animación para mantener esa sincrónica acción.

Prueba esto:

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