appendTo()动画 [英] appendTo() animation

问题描述

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

Trying to achieve any moving effect while appending an element from one to another with jQuery or 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/

推荐答案

您可以将元素的克隆附加到新位置，但将其隐藏.将原始元素设置为新的动画，然后删除旧元素并显示新元素.

You could append a clone of the element to the new spot, but keep it hidden. Animate the original element into the new spot, then remove the old element, and show the new one.

我做了一个插件来做到这一点.试试这个:

I made a plugin to do this. Try this:

$.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/

这篇关于appendTo()动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！