I have taught myself most of what I know and I realize there may be better practices out there that could help me. Right now, I am using jQuery to adjust an element's opacity when the mouse hovers over it. However, I am struggling with making sure that the opacity resets back to 0 whenever I navigate away from the component and then return.
I attempted to reset the opacity in ngOnDestroy by directly manipulating the elements using document.getElementsById(), but I understand this might not be the best approach.
I also looked into resetting the CSS properties with jQuery, but I am unsure how to go about it.
The jQuery code is located within a script tag in my index.html file:
$('.parent').mouseover(function() {
$('.children').animate(
{
opacity: 1.0
},
1250,
function() {}
)
})
When I come back to the page and the component renders again, I expect '.children' to have an opacity of 0, but they remain visible.
Is there an easy fix for this issue? Or perhaps a more efficient way to achieve what I am trying to accomplish? I also have other jQuery code in my index.html used for various Materialize CSS purposes. If there is a more effective approach, I would appreciate any guidance.