動畫完成后，jQuery動畫div繼續移動

Question

我正在對一個圓進行動畫處理，該圓可以縮放，與附近的兩個圓碰撞，並使這些圓動畫化到某個位置。 一切正常，除了當這兩個圓被設置為碰撞后位置的動畫時，它們將繼續移動 。 如果運行我的小提琴，您會注意到，在動畫完成后，與較大的圓碰撞的兩個圓實際上將繼續緩慢緩慢地遠離圓。 我在名為“ boss”的中間圓的動畫功能上嘗試了.stop(true,true) ，但是這樣做只能使中間圓沒有顯示出增長。 我在老板增長動畫上嘗試了.finish() ，但這對動畫制作完成后繼續.finish()的其他圈子沒有幫助。

內容： http : //jsfiddle.net/direlelephant/fMLKZ/2/

編輯：這是真的，無論我將div的位置設置為固定還是絕對。

編輯：我還嘗試了.clearQueue()和.stop(true, false)和stop(true) 。 ClearQueue（）對解決問題沒有任何幫助，stop（true，false）和stop（true）一樣也阻止了中間圓的動畫。

Answer 1

問題是：您在循環內創建動畫。 將部分代碼替換為

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

            }

並打開控制台。 您將看到，您創建了約1000個動畫（console.log（1）執行了1000次） $( objectify3 ).animate ，然后jQuery一個接一個地運行了1000個動畫。 它們將在〜1000 * 3000秒后結束。 我認為您需要一個標志，並且在第一個交叉點僅運行一次動畫。