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

});