jQuery animated divs continue to move after animation is complete

Question

I'm animating one circle which scales, collides with two circles nearby it, and causes those circles to be animated to a certain position. Everything works, except when those two circles are animated to their post-collision position they continue to move. If you run my fiddle you'll notice that afterwards the two circles which collide with the bigger circle will actually continue to inch very slowly away from the circle well after the animation is complete. I tried .stop(true,true) on the animate function for the middle circle, called 'boss', but that only makes it so the middle circle isn't shown to grow. I tried .finish() on the boss growth animation but that doesn't help the other circles which continue to inch away well after the animation is complete.

FIDDLE: http://jsfiddle.net/direlelephant/fMLKZ/2/

EDIT: This is true whether I set the position of the divs to fixed or to absolute.

EDIT: I also tried .clearQueue() and .stop(true, false) and stop(true). ClearQueue() did nothing to help the problem, stop(true,false) prevented the middle circle from animating, as did stop(true).

Answer 1

The problem is: you create animations within loop. Replace part of your code with

  if ( distanceformula( xcoord3, xboss, ycoord3, yboss ) < ((boss.outerWidth() / 2) + (objectify3.outerWidth() / 2)) ) {
              console.log(1)
              $( objectify3 ).animate( {
                left: xmove3 + "px",
                top: ymove3 + "px"
              }, {
                duration:3000,
                step: function() {
                  console.log(2)                  
                }
              });

            }

and open console. You will see, that you created ~1000 animations (console.log(1) executes 1000 times) $( objectify3 ).animate, and then jQuery run 1000 animations one after one. They will end in ~1000 * 3000 seconds. I think you need a flag and run animations only once with first intersection.