How to move child element from one parent to another with animation (jQuery)

Question

I made a toggle function that change the parent of a child element with some code from HERE. But I want to know if there is a way to change the parent with animation, because now it just jump from one div to another.

This is the fiddle

Here is some code:

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

Answer 1

Do it like this:

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

Full function:

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