Jquery 将表格行设置为另一个元素的动画

我有一个页面，其中包含一个垃圾桶图像元素，以及它附近的一个表

我无法找到一种正确执行jquery动画的方法，这样当我单击表行中的链接时，表行就会进入垃圾桶

我能找到的大多数解决方案似乎只考虑在表格中设置表格行的动画，但我想将该行移出表格，并将其设置到我页面上的垃圾桶元素中。

下面是samle jsfidle，它可以帮助您使用jquery dragable执行同样的操作。 你可以用

 $(function() {
 $( "#draggable" ).draggable();
 });

---

首先在窗口上找到行的位置，然后使其

position:absolute，然后对其设置动画（），使其变小。然后，当它位于垃圾桶上方时，将其淡出。
我会这样做

一个重要的限制条件是，只有在
ems
中定义了表格中的所有测量值（边距、填充、字体大小、宽度、高度等）时，缩入垃圾桶才能正常工作。。。即使这样，它也可能不起作用（下面只是我第一次尝试解决这个问题）

var theTableRow=$（获取行）；
//创建副本而不是移动原始副本以保留表的布局
变量newTable=$（''）
.html（“”）
.儿童（）
.html（TableRow.clone（））
.end（）；
newTable.css({
//您还需要调整这些填充和边距值
左：获取行的左偏移量，
顶部：获取行的顶部偏移，
位置：'绝对'
});
newTable.appendTo（'body'））
css（'visibility'，'hidden'）；
牛顿表({
左：垃圾桶的左偏移，
顶部：垃圾桶的顶部偏移，
宽度：0，
高度:0,，
不透明度：0，
字号：0
}，函数（）{
tableRow.remove（）；//或者可以在删除之前将高度缓慢设置为0
});
你能提出一个好方法吗？尽管小提琴中有一个错误是，如果你拖过垃圾桶，然后拖走（但不是拖过原始表格），那么物品仍然会被删除。这是我现在使用的解决方案，效果很好，谢谢。
var theTableRow = $(get the row);
// creating a duplicate rather than moving the original in order to preserve layout of the table
var newTable = $('<table class='same as on your original table'></table>')
                .html('<tbody class='same as on your original table'></tbody>')
                .children()
                .html(theTableRow.clone())
                .end();

newTable.css({
   // you'll need to adjust these values for padding and margin too
   left: get the left offset of the row,
   top: get the top offset of the row,
   position: 'absolute'
});

newTable.appendTo('body')
theTableRow.css('visibility', 'hidden');

newTable.animate({
   left: left offset of trashcan,
   top: top offset of trashcan,
   width: 0,
   height: 0,
   opacity: 0,
   font-size: 0
}, function () {
    theTableRow.remove(); // or you could slowly animate the height to 0 before removing
});