javascript - 动画移动一个 td 到另一个 td

Question

我使用 jquery 来改变表的 td 内容。我想将一个 td 的内容“移动”到另一个 td，替换现有内容。

例如:

|一个 | B |
|丙 | D |

现在我“将 D 的内容移动到 A”并得到:

| D | B |
|丙 | |

我怎样才能使这个过渡动画化？淡出/淡入很容易，但如何在视觉上将 D 移动到 A？

非常感谢

更新: 我需要以编程方式进行，所以用户拖/放不是一个选项。

Answer 1

您需要将您的内容包装在 <div> 中的 td 中, 并得到 A 和 D 单元格的绝对位置 $(element).offset(); , 和 .animate()移动它。之后，您需要删除隐藏的 div，并将 div 移动到新的单元格中。

$(function(){
    var posF = $('#first').offset();
    var posS = $('#second').offset();

    $('#second').css({
        position: 'absolute',
        top: posS.top, 
        left: posS.left
    });

    $('#first').fadeOut(function(){
         $(this).remove();   
    });

    $('#second').animate({
        top: posF.top, 
        left: posF.left
    }, 1000);
});

http://jsfiddle.net/9wa3vyh2/