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

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

});