JQuery的 - 动画的DOM元素移动到新的父？ [英] JQuery - animate moving DOM element to new parent?

问题描述

我有一个形象标签的表格单元格内，我很想搬到的其他的表格单元格，并具有运动动画。

I have an image tag inside of a table cell, that I'd love to move to another table cell, and have that movement animated.

在code看起来像这样...

The code looks something like this...

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

我想移动arrow.png到CELL2，并有某种过渡效果，preferably使用jQuery。

I'd like to move "arrow.png" to "cell2", and have some kind of transition effect, preferably with JQuery.

任何想法？

谢谢！

推荐答案

这实际上是相当困难的，因为你必须删除，并将其添加到DOM，但保持其位置。我觉得你在寻找这样的事情。基本上，我们没有动画无论是在＃CELL1 箭头或＃CELL 2 。我们刚创建的​​体 -tag一个新的和动画的。这样，我们就不必担心表格单元格的位置，因为我们可以定位相对于文档。

This is actually quite difficult because you have to remove and add it to the DOM but keep its position. I think your looking for something like this. Basically we don't animate either the arrow in #cell1 or #cell2. We just create a new one in the body-tag and animate that. That way we don't have to worry about the table cell positions because we can position relative to the document.

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();
});

我想这应该指向您在正确的方向。

I think this should point you in the right direction.

这篇关于JQuery的 - 动画的DOM元素移动到新的父？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！