JS Tween动画闪动怎么办？如何解决onmouseover事件导致的图片闪烁问题？

js tween动画闪动问题的解决之道

在撰写js tween动画时，当onmouseover事件未执行完毕便再次触发时，可能会导致图片闪烁。要解决此问题，需要采取措施来确保动画在执行过程中不会中断。

问题中给出的代码中，变量start被放置在循环内，这会导致每次触发onmouseover事件时，start的值都会发生变化，使动画位置不稳定。

正确的做法是将start变量移至循环外部。这将确保start始终保持初始值，即使动画仍在进行中。以下是修改后的代码：

var start = div.offsetLeft;

// 动画循环
for (var i = 0; i < 50; i++) {
  TWEEN.Tween(div)
    .to({ left: start + i * 2 }, 1000)
    .onUpdate(() => {
      div.style.left = div.x + 'px';
    })
    .start();
}

通过将start移至循环外部，动画位置将保持稳定，即使事件多次触发也不会再出现闪烁问题。