Question

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

E.g：

| A | B |
| C | D |

现在我“将D的内容移到A”并获得：

| D | B |
| C | |

我该如何设置此过渡的动画？淡出/淡入很容易但是如何在视觉上将D移动到A？

非常感谢

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

Answer 1

您需要在<div>的td中包含您的内容，并获取A和D单元格绝对位置$(element).offset();，并使用.animate()移动它。之后你需要删除hide 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/

Answer 2

这是一种方式：

创建克隆DIV并附加TD
将克隆置于TD D
将克隆设置为 A 位置
清空 A ，附加克隆内容并删除克隆

这样的事情:( 演示：http://jsfiddle.net/fvLr6z5s/ ）

var $d = $('.tdd')
var $a = $('.tda')
var offsetD = $d.offset()
var offsetA = $a.offset()
var $clone = $('<div>')
    .addClass('clone')
    .append($d.contents())
    .css(offsetD)
    .appendTo('body')
$clone.animate(offsetA, function() {
    $a.empty().append($clone.contents())
    $clone.remove()
})

Answer 3

您应该移动<td>代码。 here I made you a jsfiddle

这是我的代码：

<table>
    <tr>
        <td id="moveto">A</td>
        <td>B</td>
    </tr>
     <tr>
        <td>C</td>
        <td id="movefrom">D</td>
    </tr>

</table>
<input type='button' id='change'value='change'>

的js

$(function() {
 $('#change').click(function(){
  $( "#movefrom" ).animate({
    left: "-=16",  //you should change this numbers based on your table size
    top: "-=22",
 }, 5000, function() {
// Animation complete.
 });

 });

}）;

动画移动td到另一个td

3 个答案: