Fly the div into another fly effect div

Question

In the complex jquery task, if possible, I want an image to fly into another div and adding 1 to the current value, as happens in shopping carts

A script is a user who may like another user by pushing a finger up next to his image. Now I want the user’s image to continue to decrease as it flies to the counter, as soon as it reaches the div, the click image should be deleted.

I don’t know how to do the fly and shrink part even after reading the tutorial and count on what I need help with. I assume this will take a lot of time, so any guidance would be greatly appreciated. Thanks Sir Jsfiddle

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

The image below explains a lot more.

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

If I understand the question, this should give you a start:

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