如何将 td 内容跨界移动到同一行的另一个 td

Question

我正在尝试编写一个动画来将一个 td 内容（它是 td 内的一个 div）推送到同一 tr 中的另一个 td（到行的末尾）跨越 tds 边界而不改变 td 的宽度.

有什么好办法吗？ CSS / jQuery？

Answer 1

如果您想要的是动画（第一个 td 内容似乎“滑入”另一个带有动画的 td），我想出了这个（希望我的问题是正确的）：

$div = $('td.first > div');
$div
    .css({position:'relative'})
    .animate({
        left:$('td.second').offset().left - $('td.first').offset().left
    }, {
        complete:function(){
            $div.appendTo('td.second');
            $div.css({position:'', left:''});
        }, 
        duration:1000
    });

那么它有什么作用呢？

1. 将内容的位置设置为“相对”。这样，我们可以相对于它的原始位置移动它。

2. 对其进行动画处理，使其准确地移动到它应该在 td.second 内的位置。我们用jquery的offset()函数计算单元格之间的距离

3. 在动画结束时，我们实际上复制了第二个内部的 div。在此之前它是视觉上的，但实际上不是在另一个 td 中。

4. 我们立即删除 position 和 left css 属性。如果没有这条线，div 将偏离其新位置。

这个我没有测试，可以优化一下。