jquery cloning exactly over the original image, by using parent
<p>I am trying to accomplish a move image (product) in our webstore to cart animation. Looking for some help on how to clone smart </p>

<p>What I want is 
 - for the image to clone, 
 - then append/prepend on the exact samen spot 
 - (actually as a copy lying on top of the original)
 - then move to new location</p>

<p>This is my code so far</p>

<p>update: first I was trying to find the parent of the image to appendto, but now I am testing the wrap() and then appending to the new wrap.</p>

<pre><code>    if(jQuery('img#basket-image'+id)){
        var prod_img    = jQuery('img#basket-image'+id);
        var prod_div    = jQuery(prod_img).wrap('&lt;div class="prod_div'+id+'" /&gt;');
        var basket  = jQuery("#bottom-checkout")
        // Idee is om frame te sluiten, dan plaatje te pakken en die naar basket te gooien.
        // Code komt van: http://www.webresourcesdepot.com/fly-to-basket-effect-with-jquery/
        var basketX         = basket.offset().left;
        var basketY         = basket.offset().top;
        var productX        = jQuery(window).width() - prod_img.width();
        var productY        = jQuery(window).height() - prod_img.height(); 
        var gotoX       = basketX - productX;
        var gotoY       = basketY - productY;
        var newImageWidth   = 64;
        var newImageHeight  = 64; 
        jQuery(prod_img).clone().prependTo(prod_div).css({'position':'absolute','z-index':301}).animate({width:newImageWidth,height:newImageHeight,left:gotoX,top:gotoY},1400, function() {
            $(this).remove();
            jQuery(basket).effect("shake", {times:6, distance:8}, 140);
            })
    }
</code></pre>
