Vuela un Div a otro div con efecto volar

Question

En un problema complejo de jquery, si es posible, quiero un an image to fly into another div y sumando 1 al valor actual, tal como se hace en los carritos de compras

El escenario es que a un usuario le gusta a otro usuario, haciendo clic en los pulgares al lado de su imagen ahora quiero que la imagen del usuario siga siendo más pequeña en tamaño a medida que vuela al mostrador, una vez alcanzado al DIV, se debe eliminar la imagen que se hace clic.

no soy capaz de hacer fly and shrink part incluso después de leer el tutorial y creo que es algo con lo que necesito ayuda.Imagino que esto llevará mucho tiempo, por lo que cualquier orientación sería muy apreciada.Gracias señor Jsfiddle

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

La imagen a continuación explica las cosas más.

Answer 1

demo jsbin

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

}); 

Answer 2

Si entiendo la pregunta, esto debería servirle para empezar:

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