Is "addEventListener 'DOMContentLoaded'" not working correctly? Or I do not understand something?

Question

JavaScript

Hello to all forum users!
Who is not lazy, tell me. I am writing a JS script. At some point, I noticed that my animation was buggy. Started digging, looking for the cause. I tried everything, nothing helped until I replaced:

document.addEventListener('DOMContentLoaded', function () { тут весь код с анимацией });

on the

$(document).ready(function(){ тут весь код с анимацией });

Can someone please explain what the difference is? Moreover, one variable was not correctly defined inside the animation when using "DOMContentLoaded" - if you explicitly specify a number instead of a variable, then everything works correctly, and in the case of the "ready function" everything worked as expected with the variable. Can anyone tell me if this is really such a big difference? And what's the difference anyway?

Answer 1

Thanks to everyone for active discussions, for numerous advice, but none of your options suited me. Therefore, I will answer myself (in other words):
DOMContentLoaded - means that all DOM markup elements have already been created, you can search for them, hang up handlers, create an interface, but at the same time, some pictures or styles may not have loaded yet.
$(document).ready(function(){} is the DOM tree readiness function. That is, this function is run when the DOM of the page has been fully loaded.
Thanks to user AlexZaw from cyberforum.