Fly một Div khác div với hiệu ứng bay

Question

Trong một vấn đề jquery phức tạp, Nếu có thể, tôi muốn có một an image to fly into another div và thêm từ 1 tới giá trị hiện tại, cũng giống như nó trong giỏ hàng

Kịch bản là một người sử dụng có thể giống như một người dùng khác, bằng cách nhấp vào ngón tay cái lên bên cạnh hình ảnh của anh ấy bây giờ tôi muốn hình ảnh người dùng tiếp tục thu nhỏ kích thước nhỏ hơn khi nó bay tới quầy, khi đã đạt đến hình ảnh div được nhấp.

Tôi không thể làm fly and shrink part ngay cả sau khi đọc hướng dẫn và xem xét điều gì đó mà tôi cần trợ giúp. Tôi hình dung một điều tiêu tốn thời gian của nó, vì vậy mọi hướng dẫn sẽ được đánh giá cao. Cảm ơn bạn Sir Jsfiddle

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

Hình ảnh dưới đây giải thích nhiều điều

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

Nếu tôi hiểu câu hỏi, điều này sẽ cung cấp cho bạn một sự khởi đầu:

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