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在动画完成后继续移动

回答

相关问题