How do I tween two positions with jQuery?

Question

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?

Is target in the same place on your page all the time or could it be in a different position based on other content? — Catfish, Dec 06 '11 at 14:45

score 0 · Accepted Answer · answered Dec 06 '11 at 15:07

0

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

answered Dec 06 '11 at 15:07

zzzzBov

174,988
54
320
367

This is pretty close to the raw way I was imagining. Should be pretty easy to abstract into a plugin, though I was hoping one already existed. Ty for the pseudo. – Dane O'Connor Dec 06 '11 at 17:28

How do I tween two positions with jQuery?

1 Answers1