Fly a Div to another div with fly effect

Question

In a complex jquery problem, If possible,I want a an image to fly into another div and adding 1 to current value , just as it does in shopping carts

The scenario is a user can like another user, by clicking thumbs up next to his image now I want the image of user keeps getting smaller in size as it fly's to the counter, once reached to the div the image clicked should be removed.

I am not able to do fly and shrink part even after reading tutorial and reckon its something I need help with. I envision its a time consuming thing thus any guidance would be hugely be appreciated. Thank you Sir Jsfiddle

http://jsfiddle.net/rigids/TYMfB/

Image below explains things more

Surfboard

Answer 1

jsBin demo

var $counter = $('#counter');

$('.row').click(function(){

  var $that  = $(this);
  var $clone = $that.clone();
  var speed  = 1000;

  // "hide" clicked and create a clone that will fly
  $that.slideUp(speed).after($clone);

  $clone.css({
    // Setup initial position
    position: 'absolute',
    top:      $that.offset().top,
    left:     $that.offset().left
  }).animate({
    // Fly!
    left:     $counter.offset().left,
    top:      $counter.offset().top,
    width:    0,
    height:   0
  },speed, function() {
    // On animation end:
    // Increment counter
    $counter.text( +$counter.text() + 1 );
    // Remove both elements
    $that.add( $clone ).remove(); 
  }); 

}); 

Tepid

roXon, Thank you for putting your extra effort into it, Really appreciate you spending time to help a learner. Stack says Bounty can only be awarded in 23 hours from now – Surfboard

Answer 2

If I'm understanding the question, this should give you a start:

http://jsfiddle.net/TYMfB/8/

$(".row").click(function(){
    var $this = $(this);
    var pos = $this.position();

    $this.css({position : "absolute", top: pos.top, left: pos.left})
        .add($this.find("img"))
        .animate({top: 0, left: 0, width: 0, height: 0},1000,function(){
             $this.hide();
        }); 
});​

Visby

I think he wants a clone of the image to fly up to the counter? Either way, you're on track... – Utta

Hey James You took this almost there but I still have 2 problems :( I want only user image to fly donot have any idea on jquery also I have like 200 rows if users goes too fast(I copied a script) the script gets hanged and pops up a alert saying do you want to continue running this script or stop, can we lock the user interface till one animation is complete... By the way thank you so much this is awesome – Surfboard

Sorry, but I'm not going to write the whole thing for you. What I wrote should give you a good starting point. You'll have to work out the full details yourself. – Visby