In my project, I have implemented a small mouseover and mouseout functionality. The challenge I am facing is that I need to keep the mouseout function using animate() instead of css() for specific reasons.
The issue arises when I quickly do a mouseover followed by a mouseout while the opacity animation from 1 to 0 is still in progress, which is commonly done during testing purposes.
I attempted to use setTimeOut as well to ensure that the opacity is set to zero after a certain period of time.
However, both the animate and setTimeOut methods are causing a problem where after triggering the mouseover function and updating the opacity to 1, the ongoing animations reset the opacity back to zero because they are still active. JSFIDDLE Jquery Code:
$("#dp-ashish").on("mouseover",function(){
$("#dp-ashish").css("opacity","1");
});
$("#dp-ashish").on("mouseout",function(){
$("#dp-ashish").animate({"opacity":"0"},1000);
});