Как да направя между две позиции с jQuery?

Ако имам следната маркировка:

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

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

Как да използвам jQuery за „tween“ анимиране на преместване на 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 точно преди елемента, който искате да tween (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