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

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

<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 или плагина.

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


animation jquery tween
person Dane O'Connor    schedule 06.12.2011    source источник
comment
Таргетинг находится в одном и том же месте на вашей странице все время или может быть в другом месте в зависимости от другого контента?   -  person Catfish    schedule 06.12.2011
comment
@Catfish - местоположение цели динамическое.   -  person Dane O'Connor    schedule 06.12.2011

Ответы (1)


arrow_upward
0
arrow_downward

  1. вставьте заполнитель span прямо перед элементом, который вы хотите анимировать (insertBefore)
  2. вставьте элемент содержимого в его новую позицию (appendTo)
  3. сохранить новую высоту, ширину и смещение (height, width, offset)
  4. вернуть исходный элемент содержимого на его место после заполнителя (insertAfter)
  5. анимируйте высоту, ширину и смещение к новым значениям
  6. когда анимация будет завершена, снова вставьте элемент содержимого в его новую позицию
  7. ???
  8. выгода
person zzzzBov    schedule 06.12.2011
comment
Это довольно похоже на то, что я себе представлял. Должно быть довольно легко абстрагироваться в плагин, хотя я надеялся, что он уже существует. Тай за псевдо. - person Dane O'Connor; 06.12.2011