Как предотвратить ошибки в анимации JQuery

Question

У меня относительно простая анимация с использованием JQuery.

По сути, это блоки, в которых один из них анимирует непрозрачность от 1 до 0 и обратно. Я хочу приостановить анимацию при вводе мышью и перезапустить анимацию при отпускании при входе или выходе из любого из полей. Я также изменяю непрозрачность всех блоков на указателе мыши и возвращаю им исходную непрозрачность на выходе мыши.

Все это работает так, как я хочу, моя проблема заключается в следующем:

Когда я быстро наводю курсор на разные поля, может показаться, что я двигаюсь слишком быстро, чтобы поддерживать разные состояния анимации, и это, в свою очередь, приводит к ошибочным эффектам, когда непрозрачность не возвращается к исходному состоянию .

Как избежать этих ошибок? Я знаю, что логика работает правильно, похоже, это проблема с производительностью.

Логика мышиного и мышиного выхода:

$(".box").mouseenter(function() {
    $(".box").stop(true, false) // stop animation and stop queued animation
}

$(".box").mouseleave(function() {
    anim() // call anim function to restart animation
}

Рабочий пример: https://codepen.io/JonnyPS/pen/pmQbaQ?editors=0010