Анимация перемещения td в другой td

Question

Я использую jquery для изменения содержимого таблицы td. Я хочу «переместить» содержимое одного td на другой td, заменив существующий контент.

Факс .:

| A | B |
| C | D |

теперь я "переместить содержание D к А" и получите:

| D | B |
| C |     |

Как я могу оживить этот переход? Fade-out/fade-in - это просто, но как можно визуально переместить D в A?

Большое спасибо

Update: мне нужно сделать это программно, так что пользователь перетащить/падение не вариант.

Answer 1

Вам необходимо обернуть свой контент в td в <div> и получить абсолютные позиции ячеек 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

вы должны переместить <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. 
}); 

}); 

});

Answer 3

Вот один из способов:

1. создать клон DIV и добавить содержимое TD
2. Позиция клон над TDD
3. анимировать клон к положение
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() 
})