JQuery проблема: перемещение <li>от одного <ul>к вершине другого

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 и использовать его в качестве аргумента в insertBefore. Результат для каждого одинаков:

- LI исчезает и заменяется тем же контентом, но без стиля - новый контент исчезает, возможно потому, что эффект fadeOut еще не закончился.

Где я ошибся?

Спасибо ...

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