Javascript 在对表行重新排序时，如何设置其他行移开的动画？

我的web应用程序中的某些表可以通过拖放重新排序，使用以下代码：

这使用标准JavaScript insertBefore方法将表移动到不同的DOM位置，如下所示：

dragObject.parentNode.insertBefore(dragObject, currentRow.nextSibling);

它工作正常，但动作似乎很突然。我想对其进行更新，这样当我拖动一个表行时，其他行将动画显示到它们的新位置。这与iOS在可编辑表格中拖动表格行时的效果相同

我认为这可能是jQuery的一项工作，因此我调整了代码，将标准的insertBefore方法更改为jQuery的insertBefore函数，然后我认为我可以设置动画：

jQuery(".dragging").insertBefore(currentRow.nextSibling)

但在玩了不同的动画选项后，我意识到它们只能对正在移动的行设置动画，而不能对其周围的其他行设置动画

有没有人见过这样的解决方案——基本上是用HTML模拟iOS表的重新排序？我更喜欢一个与现有表行一起工作的解决方案，这样我就不必完全更改代码，但如果需要的话，我会考虑更改为基于div的标记。

为什么不使用？

---

我想它可以满足您的要求。

在给TR一个

高度
0
和
溢出：隐藏
…之后，在新位置插入TR如何，然后将其高度设置为实际值？这将“推动”以下TRs缓慢下降…啊--这一定是这个问题的答案所做的：。谢谢你解释这个技巧。我试过了，但仍然很不稳定，因为随后的表行在再次设置动画之前会被捕捉。也许我可以在移动行的旧位置添加一个空行，然后同时将其高度设置为0，同时将移动行的高度设置为0。这就是我现在的效果：表格行捕捉到它们的新位置，而没有动画。现在我再看一遍，是没有动画还是只有非常快的动画？如果有一些动画，那么可能减慢它会产生所需的效果。我查看了文档，没有看到任何关于正在设置动画的行移动或动画速度可调的参考：