Voler une division à l'autre div avec effet à la mouche

Question

Dans un problème jquery complexe, si possible, je veux un an image to fly into another div et en ajoutant 1 à la valeur actuelle, comme il le fait dans caddies

Le scénario est un utilisateur peut comme un autre utilisateur, en cliquant sur pouces vers le haut à côté de son image maintenant, je veux l'image de l'utilisateur ne cesse de diminuer taille comme voler de la contre, une fois atteint la div l'image cliquée doivent être supprimés.

Je ne suis pas en mesure de faire fly and shrink part même après avoir lu tutoriel et je pense que ses quelque chose ont besoin d'aide. J'imagine sa chose prend beaucoup de temps d'une ainsi toute orientation serait extrêmement appréciée. Merci Monsieur JsFiddle

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

l'image ci-dessous explique les choses plus

Answer 1

jsBin démo

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 je comprends bien la question, cela devrait vous donner un début:

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