jQuery elemet's offsets returns different value after second click
<p>I'm trying to create a fly to effet after clicking a button which is working on the first click but if you click it again than the goto positions are somehow left: 15 and top 15 or left: 0, top: 0</p>

<p>I think that the problem is somewhere in the .clone() and .prependTo()
because the clone duplicates the id of the image but I couldn't figure out how to remove the cloned image after the animation is finished.</p>

<p>So I need some help to make this work.</p>

<p>the html looks like this :</p>

<pre><code>&lt;div class="container"&gt;
 &lt;div class="Pic" id="PiC_111"&gt;&lt;a href="#"&gt;&lt;img id="imG_111" src="img0.jpg"&gt;&lt;/a&gt;&lt;/div&gt;
 &lt;div class="Cont"&gt;
  &lt;div class="desc"&gt;&lt;!-- some text here --&gt;&lt;/div&gt;
  &lt;form method="POST" action="func.php"&gt;
    &lt;!-- some form stuf --&gt;
    &lt;input type="submit" class="send" name="send" value="send" id="111" /&gt;
  &lt;/form&gt;
 &lt;/div&gt;
&lt;/div&gt;
&lt;div class="container"&gt;
 &lt;div class="Pic" id="PiC_123"&gt;&lt;a href="#"&gt;&lt;img id="imG_123" src="img1.jpg"&gt;&lt;/a&gt;&lt;/div&gt;
 &lt;div class="Cont"&gt;
  &lt;div class="desc"&gt;&lt;!-- some text here --&gt;&lt;/div&gt;
  &lt;form method="POST" action="func.php"&gt;
    &lt;!-- some form stuf --&gt;
    &lt;input type="submit" class="send" name="send" value="send" id="123" /&gt;
  &lt;/form&gt;
 &lt;/div&gt;
&lt;/div&gt;
&lt;!-- lot more of this --&gt;
</code></pre>

<p>the JS looks like this</p>

<pre><code>jQuery(document).ready(function($){
  $('input.send').click(function(){
    var imgID = (this.id);
    var posX = $('#imG_' + imgID).offset().left;
    var posY = $('#imG_' + imgID).offset().top;
    if($('#flytoID_' + imgID).length &gt; 0) {
        var targetX = $('#flytoID_' + imgID).offset().left;
        var targetY = $('#flytoID_' + imgID).offset().top;
    } else {
        var targetX = $('#flytoTitleWrap').offset().left;
        var targetY = $('#flytoTitleWrap').offset().top;
    }
    var gotoX = targetX - posX + 20;
    var gotoY = targetY - posY + 20;
    var newImageWidth = $('#PiC_' + imgID).width() / 3;
    var newImageHeight = $('#PiC_' + imgID).height() / 3;

    $('#PiC_' + imgID + ' a img')
    .clone()
    .prependTo('#PiC_' + imgID +' a')
    .css({'position' : 'absolute', 'z-index' : '999999'})
    .animate({opacity: 0.4}, 100)
    .animate({opacity: 0.1, marginLeft: gotoX, marginTop: gotoY, width: newImageWidth, height: newImageHeight}, 1200, function(){
        $('#notificationsLoader').html('&lt;img src=\"images/loader.gif\" /&gt;');
        $('#imglist').css({'background-position' : '-50px 0'}); 
    });
  });
});
</code></pre>

<p>Thanks in advance</p>

<p>I uploaded to jsfiddle: <a href="http://jsfiddle.net/Piszi/vD256/12/" rel="nofollow">http://jsfiddle.net/Piszi/vD256/12/</a></p>
