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/