jQuery animate image1 to image2

[godsent]

I would like to write a code to move image1 to place of image2 (removing image2 in process).

 

It should be easy, but It does not move enough in x and y directions.

 

        var pic1 = $('#image1).offset();
	var pic2 = $('#image2').offset();

	var dx = pic2.left - pic1.left;
	var dy = pic2.top - pic1.top;

	$('#image2').hide();
	$('#image1').css({position: 'absolute'}).animate({ 'left': dx, 'top': dy});

 

Even it seems to work it does not move the entire way, image1 does not reach image2 place. I can't figure out whats the problem.

 

<img id="image1" src="images/deck/image1.jpg" />
<img id="image2" src="images/deck/image2.jpg" />

[scootstah]

This seems to work: http://jsfiddle.net/KkkA3/