Search code examples
jqueryanimationtween

How do I tween two positions with jQuery?

If I have the following markup:

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

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

How do I use jQuery to 'tween' animate moving li#1 to ol.target. I can imagine how to do this in a raw way with $.animate, but I may be re-inventing the wheel. This seems like a common enough use case that I'm just missing part of the API or a plugin.

How would you do this?

Solution
    1. insert a placeholder span right before the item you want to tween (insertBefore)
    2. insert the content item into its new position (appendTo)
    3. store the new height, width, and offset (height, width, offset)
    4. return the original content item to its place after the placeholder (insertAfter)
    5. animate the height, width, and offset to the new values
    6. when the animation is complete, insert the content item to its new position again
    7. ???
    8. profit