如何使用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

此链接可能对您有用 - http://www.doc4design.com/articles/jquery-animate-unknown-height-width/

Answer 2

1. 在要补间的项目（span）之前插入占位符insertBefore
2. 将内容项插入新位置（appendTo）
3. 存储新的高度，宽度和偏移量（height，width，offset）
4. 将原始内容项返回到占位符（insertAfter）
之后的位置
5. 将高度，宽度和偏移设置为新值的动画
6. 动画完成后，再次将内容项插入新位置
7. ???
8. 利润