Fly un div a otro div con efecto mosca

Question

En un problema de jQuery compleja, si es posible, quiero un an image to fly into another div y añadiendo 1 al valor actual, al igual que lo hace en los carros de compras

El escenario es un usuario puede gustarle a otro usuario, al hacer clic en los pulgares arriba al lado de su imagen ahora quiero que la imagen del usuario se vuelva cada vez más pequeña en tamaño mientras vuela al mostrador, una vez que se llega al div, se debe eliminar la imagen .

No puedo hacer fly and shrink part incluso después de leer el tutorial y creo que es algo con lo que necesito ayuda. Me imagino que es una cosa que consume tiempo, por lo tanto, cualquier orientación sería enormemente apreciada. Gracias Sir jsFiddle

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

imagen de abajo explica las cosas más

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

}); 

Answer 2

Si estoy entendiendo la cuestión, esto debe darle un comienzo:

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