将一个td移动到另一个td的动画

Animate moving of a td to another td

本文关键字：td 移动 动画 另一个 一个      更新时间：2023-09-26

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

例如：

|A|B|
|C|D|

现在我"将D的内容移动到A"，得到：

|D|B|
|C| |

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

非常感谢

更新：我需要用程序来完成，所以用户拖放不是一个选项。

您需要在<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/

这里有一种方法：

  1. 创建克隆DIV并附加TD的内容
  2. 将克隆放置在TDD的上方
  3. 将克隆设置为A位置的动画
  4. 清空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()
})

您应该移动<td>标记我给你做了一个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.
 });
 });

})；

相关文章：