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

DEMO：http://jsfiddle.net/5936t/36/

Answer 2

可能这是你想要的

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。

Answer 3

我知道这个问题是长期的解决，但我还是决定在火箭的答复得到改善。我需要为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()的回调一样。