动画完成后jQuery动画div继续移动答案

【问题标题】：jQuery animated divs continue to move after animation is complete动画完成后jQuery动画div继续移动
【发布时间】：2014-05-02 16:16:19
【问题描述】：

我正在为一个缩放的圆圈设置动画，与它附近的两个圆圈发生碰撞，并使这些圆圈动画到某个位置。一切正常，除了当这两个圆圈被动画到它们的碰撞后位置时，它们继续移动。如果您运行我的小提琴，您会注意到，在动画完成后，与较大圆圈碰撞的两个圆圈实际上会继续非常缓慢地远离圆圈。我在中间圆圈的动画功能上尝试了.stop(true,true)，称为“老板”，但这只会使中间圆圈没有增长。我在老板成长动画上尝试了.finish()，但这对动画完成后继续远离的其他圆圈没有帮助。

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

编辑：无论我将 div 的位置设置为固定还是绝对，这都是正确的。

编辑：我也试过.clearQueue() 和.stop(true, false) 和stop(true)。 ClearQueue() 没有解决问题，stop(true,false) 阻止了中间圆圈的动画，stop(true) 也是如此。

【问题讨论】：

我还在看你的小提琴，但看起来你的动画永远不会停止。检查其中一个小圆圈，看起来top 和left 的定位以像素的一小部分不断更新。
在动画中使用这样的停止： $(objectify3).stop().animate() 停止循环。但这延迟了开始。试着环顾四周。
badAdviceGuy，我也想过这个问题，但这对我来说没有多大意义，因为定义顶部和左侧定位的 for 循环实际上只执行了两次，因为它的条件是

标签： javascript jquery css animation jquery-animate

【解决方案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 秒内结束。我认为你需要一个标志并且只在第一个路口运行一次动画。

【讨论】：

问题是我实际上无法检测到碰撞，除非我在boss动画函数的step函数中运行if block，否则boss.outerWidth()会给我一个恒定值56，而不是测量动画当前外部宽度的值。
可以检查动画是否运行，不要反复运行。 jsfiddle.net/HVBpy/2。如果合适的话，你可以检查与最终bosswidth的交集并从一开始就运行objectify3的动画，并且只运行1次。