如何使用jQuery实现两个位置之间的渐变效果？

Question

如果我有以下标记：

<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的一部分或插件。

你会怎么做呢？

- Dane O'Connor

---

目标在您的页面上是否始终处于同一位置，还是根据其他内容可能会出现不同位置？ - Catfish

@Catfish 目标的位置是动态的。 - Dane O'Connor

Answer 1

1. 在要进行缓动的项目前插入一个占位符（insertBefore）
2. 将内容项目插入到其新位置中（appendTo）
3. 存储新的高度、宽度和偏移量（height，width，offset）
4. 将原始内容项目返回到占位符后面的位置（insertAfter）
5. 将高度、宽度和偏移量缓动到新值
6. 当动画完成时，再次将内容项目插入到其新位置
7. ???
8. 获利

- zzzzBov

---

这非常接近我想象中的原始方式。不过应该很容易抽象成一个插件，虽然我希望已经有一个了。感谢伪代码。 - Dane O'Connor