jquery - 将表格行动画到另一个元素中

Question

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

我想不出一种正确执行 jquery 动画的方法，这样当我单击表格行中的链接时，表格行就会动画到垃圾桶中。

我能找到的大多数解决方案似乎只着眼于为表本身内的表行设置动画，但我想将行移出表并将其动画到我页面上的垃圾桶元素中。

Answer 1

我会做一些这样的事情。

一个重要的附带条件是，只有在表格中的所有测量值（边距、填充、字体大小、宽度、高度等）都在ems...下面只是代表我对这个问题的第一次尝试）。

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
});

Answer 2

http://jsfiddle.net/QWgRF/409/

这是 jsfidle 示例，可以帮助您使用 jquery dragable 来做同样的事情。 您可以使用

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

Answer 3

首先在窗口上找到该行的位置，然后将其position:absolute;放在该位置，然后将其 animate() 到垃圾箱，并使其变小。一旦它位于垃圾上方，然后将其淡出。