Fly an image from one div to another div

Fly an image from one div to another div

I have two div tag in my code. one div contains an image of 200 x 200
dimension. The other div does not contain anything. I want to animate this
200 x 200 image to my empty div of 30 x 30 image. I wrote the code, but it
does not. Even, it does not show any error in firebug. Could anyone please
help me??
<div>
<img class="userimage" src="images/TF-NKWS-003.png" height="200"
width="200" />
</div>
<input type="button" value="Click me to amimate"
class="animationButton" />
<br><br><br><br><br><br><br><br>
<div class="addImg">
</div>
<script type="text/javascript">
$(".animationButton").click(function(){
$(this).find(".userimage").animate({
left:$(".addImg").offset().left,
top:$(".addImg").offset().top,
width:30,
height:30
},1000,function(){
$(".addImg").append("<img src='images/TF-NKWS-003.png' />");
});
});
</script>
Thanks in advance