jquery animate position - absolute vs relative

Question

I want store the initial location of a set of "draggable" images as data attributes in the image. Then when a "putBack" button is pressed images will return to their place of origin. Problem is that images return to a relative position. Instead of Top & Left, they are positioned to 2XTop and 2XLeft.

    // assign data attributes x,y data attributes       
    $('li img').each(function(index) {
        $(this).data("Left", $(this).parent().position().left)
               .data("Top", $(this).parent().position().top);       
        console.log($(this).data("Top"));
    });

    // button to put images back where they started 
    $("#putBack").bind('click', function() {
        $('li img').each(function(index) {

        console.log($(this).data("Top"));
             $(this).parent().animate(
                     { "left": $(this).data("Left"), 
                             "top": $(this).data("Top")
                     }, "slow");                    
        });

    });

html...

<ul>
<li id='apple'><img src="images/apple.png"/></li>
<li id='bread'><img src="images/bread.png"/></li>
<li id='banana'><img src="images/banana.png"/></li>
<li id='hot_dog'><img src="images/hot_dog.png"/></li>
<ul>

css...

ul{
   width:100px;
   padding:0px;
   list-style:none;
   font-size:20px;
}

Answer 1

It looks like you're keeping the position of the parent li not the img. Here's a js fiddle that remembers the images positions and moves them back accordingly: jsfiddle.net/ps7WN