Question

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');

Please help. Thanks.

EDIT: http://jsfiddle.net/5936t/

Answer 1

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

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