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

Question

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

有什么好的方法吗？ CSS/jQuery？

Answer 1

如果它是您想要的动画（第一个 td 内容似乎 "slide" 进入另一个带有动画的 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
    });

那么它有什么作用呢？

将内容的位置设置为"relative"。这样，我们就可以相对于原来的位置进行移动了。
对其进行动画处理，使其准确地到达应在的位置（如果它在 td.second 中）。我们用jquery的offset()函数
在动画结束的时候，我们其实是复制了第二个里面的div。在那之前它是视觉上的，但实际上不是在另一个 td.
我们立即删除位置并留下 css 属性。如果没有这条线，div 将从它的新位置偏移。

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

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

How to move td content to another td at the same row across borders

javascript

css

jquery

html-table