将一个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 演示

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

});