jQuery動畫div在動畫完成後繼續移動

我正在動畫一個縮放的圓，與其附近的兩個圓相碰撞，並使這些圓被動畫到某個位置。一切正常，除非這兩個圓圈動畫到他們的碰撞後位置，他們繼續移動。如果你運行我的小提琴，你會注意到，在動畫完成之後，與大圓碰撞的兩個圓實際上會繼續很慢地遠離圓。我試圖在中間圈的動畫函數.stop(true,true)上叫做'老闆'，但這隻會讓中圈不顯示增長。我試圖在老闆成長動畫上使用.finish()，但是這並不能幫助其他圈子在動畫完成後繼續順利離開。jQuery動畫div在動畫完成後繼續移動

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

編輯：這是真的是否我的div的位置設置固定或絕對的。

編輯：我也試過.clearQueue()和.stop(true, false)和stop(true)。 ClearQueue（）並沒有幫助解決問題，停止（true，false）阻止了中間圈子的動畫，正如stop（true）一樣。

來源

2014-03-25 user3449244

我仍在看你的小提琴，但它看起來像你的動畫永不停止。檢查其中一個小圓圈，它看起來像是「頂部」和「左側」的定位在像素的小部分中不斷更新。 – badAdviceGuy

在您的動畫中使用如下停止：$（objectify3）.stop（）。animate（）停止循環。但是這延遲了開始。試着環顧這一點。 – voddy

badAdviceGuy，我也考慮過這個，但對我來說沒什麼意義，因爲定義頂部和左側定位的for循環實際上只執行兩次，因爲它的條件是 user3449244

問題是：您在循環內創建動畫。用

替換部分代碼

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秒結束。我覺得你需要一個標誌並且只在第一個路口運行一次動畫。

來源

2014-03-25 07:37:02

問題是，除非我在老闆動畫函數的step函數中運行該塊，否則我實際上無法檢測到碰撞，因爲否則，boss.outerWidth（）會給我一個常數值56，而不是一個值動畫的當前外部寬度。 – user3449244

您可以檢查動畫是否正在運行，而不是一次又一次地運行。 http://jsfiddle.net/HVBpy/2/。如果它適合，你可以檢查最終bosswidth的交集，並從一開始就運行objectify3的動畫，並且只運行一次。 –

jQuery動畫div在動畫完成後繼續移動

回答

相關問題