jquery:let elements fly from one parent to another

See: http://stackoverflow.com/questions/4093575/fly-in-animation-with-jquery

by Reusablecode

HTML

<ul id="list1">
<li>#item1</li>
<li>#item2</li>
<li>#item3</li>
</ul>
<ul id="list2">
<li>#item0</li>
</ul>

CSS

#list1 li,#list2 li{width:60px;}
#list2 li{background:green;}
#list2{position:absolute;bottom:50px;right:0}
#list1 li{cursor:pointer;background:red;}
ul{width:200px;float:left;}

JavaScript

$(document).ready(
  function()
  {
    $('#list1 li').one('click',
                       function()
                       {
                          $(this).css({position:'absolute',top:$(this).offset().top,left:$(this).offset().left})
                          .animate({top:$('#list2 li:eq(0)').offset().top,left:$('#list2 li:eq(0)').offset().left},
                                    function()
                                    {
                                      $(this).prependTo('#list2').css('position','static');
                                    }
                                   );
                       });
  }
);