Fly Div do innego div ze skutkiem lotnego

Question

W złożonym problemem jquery, jeśli to możliwe, chcę an image to fly into another div i dodanie 1 do wartości bieżącej, tak jak ma to miejsce w koszykami

Scenariusz jest użytkownik może polubić innego użytkownika, klikając Kliknięcie w górę obok jego obrazu Teraz chcę, aby obraz użytkownika stał się coraz mniejszy w rozmiarze, jak leci do licznika, po dotarciu do div obraz powinien zostać usunięty.

Nie jestem w stanie wykonać fly and shrink part nawet po przeczytaniu samouczka i liczyć na coś, z czym potrzebuję pomocy. Wyobrażam sobie, że jest to czasochłonne, więc wszelkie wskazówki będą bardzo mile widziane. Dziękuję Sir Jsfiddle poniżej

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

Obraz wyjaśnia rzeczy bardziej

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

Jeśli mam zrozumienia pytanie, co powinno dać 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(); 
     }); 
});​