javascript - jQuery animated divs continue to move after animation is complete -
i'm animating 1 circle scales, collides 2 circles nearby it, , causes circles animated position. works, except when 2 circles animated post-collision position continue move. if run fiddle you'll notice afterwards 2 circles collide bigger circle continue inch away circle after animation complete. tried .stop(true,true) on animate function middle circle, called 'boss', makes middle circle isn't shown grow. tried .finish() on boss growth animation doesn't other circles continue inch away after animation complete.
fiddle: http://jsfiddle.net/direlelephant/fmlkz/2/
edit: true whether set position of divs fixed or absolute.
edit: tried .clearqueue() , .stop(true, false) , stop(true). clearqueue() did nothing problem, stop(true,false) prevented middle circle animating, did stop(true).
the problem is: create animations within loop. replace part of code
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. see, created ~1000 animations (console.log(1) executes 1000 times) $( objectify3 ).animate, , jquery run 1000 animations 1 after one. end in ~1000 * 3000 seconds. think need flag , run animations once first intersection.
Comments
Post a Comment