Question

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

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.

So I need some help to make this work.

the html looks like this :

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

the JS looks like this

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 > 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('<img src=\"images/loader.gif\" />');
        $('#imglist').css({'background-position' : '-50px 0'}); 
    });
  });
});

Thanks in advance

I uploaded to jsfiddle: http://jsfiddle.net/Piszi/vD256/12/

Answer 1

It really depends what exactly you wish to accomplish with this. In case you want to remove product image after it has been animated to basket you can replace part of your code with the following:

var clone = $('#PiC_' + imgID + ' a img') //UPDATE
.clone(true)
.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('<img src=\"images/loader.gif\" />');
        $('#imglist').css({'background-position' : '-50px 0'}); 
        $(clone).remove(); //UPDATE new line
    });

Please note that var clone keeps reference to the cloned object so you can do anything you want with it. Example you could change it’s id after animation has been complete with replacing $(clone).remove(); with clone.attr('id', 'myNewID'); etc…
Update jsFiddle link: http://jsfiddle.net/salih0vicX/vD256/13/

I’ve also noticed that some HTML elements are missing – example: jQuery is referencing to an element with id=”imglist”; there is no such element in provided HTML resulting with no loader.gif is being loaded; etc. Anyway, I hope this answered your question.