Fly a Div to another div with fly effect

Question

In a complex jquery problem, If possible,I want a an image to fly into another div and adding 1 to current value , just as it does in shopping carts

The scenario is a user can like another user, by clicking thumbs up next to his image now I want the image of user keeps getting smaller in size as it fly's to the counter, once reached to the div the image clicked should be removed.

I am not able to do fly and shrink part even after reading tutorial and reckon its something I need help with. I envision its a time consuming thing thus any guidance would be hugely be appreciated. Thank you Sir Jsfiddle

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

Image below explains things more Struck with jquery effects

score 6 · Answer 1 · answered Feb 20 '12 at 18:57

6

If I'm understanding 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();
        }); 
});

answered Feb 20 '12 at 18:57

James Montagne

73,502
13
107
127

I think he wants a clone of the image to fly up to the counter? Either way, you're on track... – Ryley Feb 20 '12 at 18:58
Hey James You took this almost there but I still have 2 problems :( I want only user image to fly donot have any idea on jquery also I have like 200 rows if users goes too fast(I copied a script) the script gets hanged and pops up a alert saying do you want to continue running this script or stop, can we lock the user interface till one animation is complete... By the way thank you so much this is awesome – June Feb 20 '12 at 19:07
1

Sorry, but I'm not going to write the whole thing for you. What I wrote should give you a good starting point. You'll have to work out the full details yourself. – James Montagne Feb 20 '12 at 19:19

Roko C. Buljan · Accepted Answer · 2015-05-18T12:35:16.297

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

});

roXon, Thank you for putting your extra effort into it, Really appreciate you spending time to help a learner. Stack says Bounty can only be awarded in 23 hours from now — June, Feb 20 '12 at 19:43

Fly a Div to another div with fly effect

2 Answers2