Javascript jQuery动画div在动画完成后继续移动

我正在设置一个圆圈的动画，它会缩放，与附近的两个圆圈碰撞，并使这些圆圈被设置到特定的位置。一切正常，除非这两个圆被设置为碰撞后的动画位置，否则它们将继续移动。如果你运行我的小提琴，你会注意到，在动画完成后，与较大圆圈碰撞的两个圆圈实际上会继续缓慢地远离圆圈。我尝试了

.stop（true，true）

中圆的动画功能，称为“boss”，但这只能使中圆不会增长。我尝试了boss growth动画的

.finish（）

，但这对动画完成后继续缓慢移动的其他圆圈没有帮助

小提琴：

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

---

编辑：我还尝试了

.clearQueue（）

和

停止（真、假）

和

停止（真）

。ClearQueue（）没有帮助解决问题，stop（true，false）阻止了中间圆圈的动画制作，stop（true）也阻止了中间圆圈的动画制作。

问题是：在循环中创建动画。将部分代码替换为

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

            }

if（距离公式（xcoord3，xboss，ycoord3，yboss）<（（boss.outerWidth（）/2）+（objectify3.outerWidth（）/2）））{
控制台日志（1）
$（objectify3）。设置动画（{
左：xmove3+“px”，
顶部：ymove3+“px”
}, {
时长：3000，
步骤：函数（）{
控制台日志（2）
}
});
}

打开控制台。 您将看到，您创建了约1000个动画（console.log（1）执行1000次）

$（objectify3）。动画制作

，然后jQuery一个接一个地运行1000个动画。它们将在约1000*3000秒后结束。

---

我想你需要一个旗子，在第一个十字路口只运行一次动画。

我还在看你的小提琴，但看起来你的动画从未停止过。检查其中一个小圆圈，它看起来像

顶部

和

左侧

定位在像素的一小部分中不断更新。在动画中使用类似这样的停止：$（objectify3）。停止（）。动画（）停止循环。但这推迟了开始。试着看看这个。badAdviceGuy，我也考虑过，但这对我来说没有多大意义，因为定义顶部和左侧定位的for循环实际上只执行两次，因为它的条件是

---

• [jquery]相关文章推荐

---

• 随机文章推荐