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

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