appendTo()动画

Question

在使用jQuery或jQuery-UI将元素从一个元素添加到另一个元素时，尝试实现任何移动效果。

<div id='div1'><div id='i-am-moving-slow'></div></div>
<div id='div2'></div>

$('#i-am-moving-slow').appendTo('#div2');

请帮帮忙。谢谢。

编辑：http://jsfiddle.net/5936t/

Answer 1

您可以将元素的克隆附加到新的点，但将其保持隐藏状态。将原始元素动画化为新的点，然后删除旧元素，并显示新元素。

我做了一个插件来做这件事。试试这个：

$.fn.animateAppendTo = function(sel, speed) {
    var $this = this,
        newEle = $this.clone(true).appendTo(sel),
        newPos = newEle.position();
    newEle.hide();
    $this.css('position', 'absolute').animate(newPos, speed, function() {
        newEle.show();
        $this.remove();
    });
    return newEle;
};


$('#i-am-moving-slow').click(function() {
    $(this).animateAppendTo('#div2', 1000);
});​

演示：http://jsfiddle.net/5936t/36/

Answer 2

我知道这个问题早就解决了，但我决定改进火箭的答案。我不仅需要对appendTo的行为进行动画处理，还需要对prependTo、insertBefore和insertAfter的行为进行动画处理，我还希望能够像使用$.fn.animate()一样自定义缓动和提供回调。

此外，我的函数保留了原始元素，而不是它的克隆元素，其行为与appendTo完全相同。因此，如果您的脚本变量中有任何对该元素的现有引用，它们将不会中断。

我也使用position: relative而不是position: absolute来做动画，所以如果元素的宽度是其容器的100%，那么在动画过程中它不会跳出并占据100%的窗口。然而，在动画结束时，它将跳转到100%的宽度，无论新容器的宽度是什么。

这是我的解决方案：

$.fn.animateTo = function(appendTo, destination, duration, easing, complete) {
  if(appendTo !== 'appendTo'     &&
     appendTo !== 'prependTo'    &&
     appendTo !== 'insertBefore' &&
     appendTo !== 'insertAfter') return this;
  var target = this.clone(true).css('visibility','hidden')[appendTo](destination);
  this.css({
    'position' : 'relative',
    'top'      : '0px',
    'left'     : '0px'
  }).animate({
    'top'  : (target.offset().top - this.offset().top)+'px',
    'left' : (target.offset().left - this.offset().left)+'px'
  }, duration, easing, function() {
    target.replaceWith($(this));
    $(this).css({
      'position' : 'static',
      'top'      : '',
      'left'     : ''
    });
    if($.isFunction(complete)) complete.call(this);
  });
}

用法：

// basic usage
$("#i-am-moving-slow").animateTo('appendTo', '#div2');

// advanced usage
$("#i-am-moving-slow").animateTo('insertAfter', '#some-other-div', 'linear', function() {
  console.log("animation completed on ", this);
});

duration和easing将被委托给animate调用，因此如果省略它们，它们将作为undefined传入，而jQuery将使用默认值。在动画末尾发生元素替换之后，调用complete，并将this设置为与动画元素相等，就像$.fn.animate()的回调所做的那样。

Answer 3

也许这就是你想要的

HTML

<div id='div1'><div id='i-am-moving-slow'>i-am-moving-slow</div></div>
<div id='div2'>div2</div>

JS

$('#div2')
.append($('#i-am-moving-slow')
.css({'margin-left':-$(this).width()+'px'})
.delay(500)
.animate({'margin-left':'0px'}, 'slow'));​

这是一个example。

如果你想添加一个拷贝，那么你应该克隆它并使用here is another example克隆。