jquery - テーブルの行を別の要素にアニメーション化する

Question

ゴミ箱の画像要素を含むページと、その近くのテーブルがあります。

テーブル行のリンクをクリックすると、テーブル行がゴミ箱にアニメーション化されるように、jqueryアニメーションを適切に実行する方法がわかりません。

私が見つけることができるほとんどの解決策は、テーブル自体の中でテーブルの行をアニメーション化することだけを見ているようですが、テーブルから行を移動して、ページにあるゴミ箱要素にアニメーション化したいと思います。

Answer 1

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

これは、jquerydragableを使用して同じことを実行できるようにするためのsamlejsfidleです 。

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

Answer 2

最初にウィンドウ上の行の位置を見つけ、次にposition:absolute;その場所に配置し、次にそれをゴミ箱にanimate（）して、小さくします。次に、ゴミ箱の上に配置されたらフェードアウトします。

Answer 3

私はこのようなことを少しします。

ems重要な条件の1つは、テーブル内のすべての測定値（マージン、パディング、フォントサイズ、幅、高さなど）が...で定義されている場合にのみ、ゴミ箱への縮小が適切に機能することです。以下は、問題に対する私の最初の刺し傷となるものを表しています）。

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