JQuery - анимационное перемещение элемент DOM к новому родителю?

Вам нужно будет сделать это в два этапа: (1) анимация (2) переназначение.

Анимация, о которой вы можете позаботиться с помощью .animate (), как @Ballsacian указывает вне. Перемещение может быть выполнено с помощью .html () - в приведенном выше примере

var arrowMarkup = $('#cell1').html(); //grab the arrow
$('#cell1').html(""); //delete it from the first cell
$('#cell2').html(arrowMarkup); //add it to the second cell

Конечно, вам придется усложнить этот код, чтобы интегрировать анимацию. И этот способ сделать это не приведет к тому, что выделение (я предполагаю, что вы выбираете строку таблицы?) Активирует строки между старым выбором и новым, когда стрелка проходит мимо них. Этого было бы еще сложнее достичь.

JQuery http://docs.jquery.com/Downloading_jQuery
Эффекты JQuery http://docs.jquery.com/Effects/animate#paramsoptions

Пример

 $("#go1").click(function(){
      $("#block1").animate( { width:"90%" }, { queue:false, duration:3000 } )
         .animate( { fontSize:"24px" }, 1500 )
         .animate( { borderRightWidth:"15px" }, 1500);
    });

На самом деле это довольно сложно, потому что вам нужно удалить и добавить его в DOM, но сохранить его позицию. Я думаю, вы ищете что-то подобное. Обычно мы не анимируем стрелку в # cell1 или # cell2 . Мы просто создаем новый в теге body и анимируем его. Таким образом, нам не нужно беспокоиться о позициях ячеек таблицы, потому что мы можем позиционировать себя относительно документа.

var $old = $('#cell1 img');
//First we copy the arrow to the new table cell and get the offset to the document
var $new = $old.clone().appendTo('#cell2');
var newOffset = $new.offset();
//Get the old position relative to document
var oldOffset = $old.offset();
//we also clone old to the document for the animation
var $temp = $old.clone().appendTo('body');
//hide new and old and move $temp to position
//also big z-index, make sure to edit this to something that works with the page
$temp
  .css('position', 'absolute')
  .css('left', oldOffset.left)
  .css('top', oldOffset.top)
  .css('zIndex', 1000);
$new.hide();
$old.hide();
//animate the $temp to the position of the new img
$temp.animate( {'top': newOffset.top, 'left':newOffset.left}, 'slow', function(){
   //callback function, we remove $old and $temp and show $new
   $new.show();
   $old.remove();
   $temp.remove();
});

Я думаю, это должно указать вам правильное направление.