Finding Child/Animate/AppendTo

Finding Child/Animate/AppendTo

Hi, I'm trying to find the first child of a parent, then animate it to a position, then remove it from the parent and add it to a new parent. I'm pretty sure I'm doing or looking at this entirely wrong however.

Am I right, when you want to remove an element from it's parent and place it inside a new parent, you should appendTo the element? (place inside=nest right aswell?) Does this 100% remove the element and 100% create/move it to the new parent? So if I affect the elements new position is it completely relative to the position/properties of the new parent and free from any association of the previous parent?

I'm sort of working off of the assumption that it is a clean removal and insertion. Is there an order in which calls are executed when the appened is concerend? I'm having trouble controlling the sequence in which events occour. If I want to find the child, then animate the child, then append the child, do I have to create a function inside the animate method?

Sorry for the bad terminology, I'm learning as I go along.
  1. $(document).ready(function(){

    $("#click").click(function(){


  2.        $("#first").children(':first-child').animate({left:'+50px'}).delay(500).appendTo('#second');

  4.        $("#second").children(':first-child').animate({left:'-50px'}).delay(500).appendTo('#first');

     });
    });



http://jsfiddle.net/KyVJ3/2/