Different Results Tweening via Javascript vs Tweening via jQuery

[hackfin 6 Likes (Newbie)]

What started out as a simple replacement of a jQuery .hover() function with native javascript has turned into to a roadblock for me. I am replacing a simple hover tween with the native onmouseenter/onmouseleave in a javascript function I have created.  The function is approximately 1000 lines of code so it took some time to break out the components into codepen to demonstrate my problem:

 

If you review the codepen, I have a function in the global namespace that takes options from the user to set certain callbacks or hooks.  Using the original jQuery .hover() function produces the results I want.  The replacement in native javascript does not. However, note that the last 2 buttons use the replacement javascript successfully except the tween is defined at the same scope and does not go through the user hook.

 

If anyone can explain to me why the jQuery function works through the hook while the javascript function does not, I would appreciate it.

 

Also note that the javascript object returned by the tween is different between the 2.

See the Pen OMeKMo by hackfin (@hackfin) on CodePen

[Tahir Ahmed 93 Likes (Contributor)]

I could be wrong but don't you think that your second `[].forEach()` call should have `.js-button` as its target elements rather than the same `.jq-button`?

 

Does that help?

[hackfin 6 Likes (Newbie)]

Tahir, thanks.  Unfortunately that means I have not entered enough of my code into codepen to reduplicate the issue.  I will adjust my codepen and post back when it is ready (broken).