Fly Div к другому Div с эффектом мухи

Question

В сложной проблеме jquery, если возможно, я хочу an image to fly into another div и добавление 1 к текущему значению, так же, как это происходит в корзинах для покупок

Сценарий: пользователь может понравиться другому, щелкнув большими пальцами вверх рядом с его изображением, теперь я хочу, чтобы изображение пользователя становилось все меньше и меньше по мере того, как оно летало к счетчику, как только оно достигло div, изображение, на которое щелкнули, должно быть удалено.Я не могу сделать fly and shrink part даже после прочтения учебника и считаю, что мне нужна помощь.Я предполагаю, что это трудоемкая вещь, поэтому любые рекомендации будут высоко оценены.Спасибо, сэр Jsfiddle

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

Изображение ниже объясняет вещи более

Answer 1

Если я понимаю вопрос, это должно дать вам начало:

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

Answer 2

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

});