Animate child to another Parents position

Animate child to another Parents position

Hi, I'm trying to move an element to the position of another element. The catch is, it's a child element. I think if I am getting this right, that it's telling the children to move appropriately, but in the context of their parent elements. So their movements are relative to the parents, not the main document. Is there a way I can deal with this besides detaching the children prior to initiating the movement?

Thanks for reading :)
http://jsfiddle.net/8cxAB/1/
  1. $(document).ready(function() {
                    var box1Pos     = $("#box1").position();
                    var box1Width  = $("#box1").css("width");
                    var box1Height = $("#box1").css("height");
                    var box3Pos     = $("#box3").position();
                    var box3Width  = $("#box3").css("width");
                    var box3Height = $("#box3").css("height");

            $("#box1").click(function() {
                    $(this).children().animate({left:box3Pos.left, top:box3Pos.top, width:box3Width, height:box3Height});
                    $("#box3").children().animate({left:box1Pos.left, top:box1Pos.top, width:box1Width, height:box1Height});
            });
           
                   
           
    });