javascript - JQuery - 将 DOM 元素移动到新父元素的动画？

Question

我在一个表格单元格内有一个图像标签，我想将其移动到另一个表格单元格，并为该移动设置动画。

代码看起来像这样......

<td id="cell1"><img src="arrow.png" alt="Arrow"/></td>
<td id="cell2"></td>

我想将“arrow.png”移动到“cell2”，并有某种过渡效果，最好使用 JQuery。

有什么想法吗？

谢谢!

Answer 1

这实际上非常困难，因为您必须将其删除并添加到 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();
});

我认为这应该为您指明正确的方向。