如何使用动画（jQuery）将子元素从一个父元素移动到另一个父元素

Question

我创建了一个toggle函数，它使用HERE中的一些代码更改子元素的父元素。但我想知道是否有办法用动画更改父级，因为现在它只是从一个div跳到另一个div。

This is the fiddle

以下是一些代码：

function SW()
{
    $("#SW").toggle(function(){
        var element = $("#RelativeChild").detach().appendTo("#ParentRight");
    },
    function(){
        var element = $("#RelativeChild").detach().appendTo("#ParentLeft");
    });
}

Answer 1

这样做：

var element = $("#RelativeChild").hide('fade').detach().appendTo("#ParentRight")
.end().show('fade');

全功能：

function SW() {
    $("#SW").toggle(function () {
        var element = $("#RelativeChild").hide('fade').detach().appendTo("#ParentRight")
        .end().show('fade');
    },

    function () {
        var element = $("#RelativeChild").hide('fade').detach().appendTo("#ParentLeft")
        .end().show('fade');
    });
}

Demo