Question

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

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

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

Answer 1

这里有一个示例jsfiddle来帮助你使用jquery draggable来做同样的事情.. 你可以用

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

Answer 2

首先在窗口上找到行的位置，然后在该位置将其设为position:absolute;，然后将其设置为动画（）到垃圾箱，并使其变小。一旦它位于垃圾桶上方，它就会淡出来。

Answer 3

我会做这样的事情。

一个重要的附带条件是，如果表格中的所有测量（边距，填充，字体大小，宽度，高度等）都在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
});

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

3 个答案: