Question

我正在制作一个可以缩放的圆圈，与它附近的两个圆圈相撞，并使这些圆圈动画到某个位置。一切正常，除非这两个圆圈被动画化为它们的碰撞后位置，否则它们继续移动。如果你运行我的小提琴，你会注意到，在动画完成后，与较大圆圈相撞的两个圆圈实际上将继续非常缓慢地离开圆圈。我在中间圆的动画函数上尝试了.stop(true,true)，称为“boss”，但这只会使中间圆不显示增长。我在老板成长动画上尝试了.finish()，但这对于动画完成后继续勉强离开的其他圈子没有帮助。

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

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

编辑：我还尝试了.clearQueue()和.stop(true, false)以及stop(true)。 ClearQueue（）没有做任何事情来帮助解决这个问题，stop（true，false）阻止了中间圈的动画，就像停止（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秒内结束。我认为你需要一个标志，并且只在第一次交叉时运行一次动画。

动画完成后，jQuery动画div继续移动

1 个答案: