Как мне анимировать две позиции с помощью jQuery?

Question

Если у меня есть следующая разметка:

<ol class='source'>
  <li id='1'>first</li>
</ol>

<ol class='target'>
  <li id='2'>second</li>
</ol>

Как использовать jQuery для анимации движения li#1 на ol.target. Я могу вообразить, как это сделать с помощью $.animate, но я, возможно, заново изобретаю колесо. Это похоже на достаточно распространенный вариант использования, в котором мне не хватает части API или плагина.

Как бы вы это сделали?

Answer 1

1. вставьте заполнитель span прямо перед элементом, который хотите анимировать (insertBefore)
2. , вставьте элемент контента на новую позицию (appendTo)
3. сохранить новую высоту, ширину и смещение (height, width, offset)
4. вернуть исходный элемент содержимого на место после заполнителя (insertAfter)
5. анимируйте высоту, ширину и смещение к новым значениям
6. , когда анимация будет завершена, снова вставьте элемент контента на новую позицию
7. ???
8. profit

Answer 2

Эта ссылка может быть полезна для вас - http://www.doc4design.com/articles/jquery-animate-unknown-height-width/