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

Answer 1

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();
        }); 
});​

Answer 2

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(); 
  }); 

});