I'm attempting to incorporate a basic fadeIn() CSS effect on specific objects that are tagged with the "button" class. My goal is to have the "hoverbutton" class fade in when the object is hovered over, and then fade out when the cursor moves away from it.
While searching for solutions, I came across code that appeared to be effective initially. However, I soon realized that when rapidly hovering over multiple buttons, some of them would remain stuck in the "hoverbutton" state. I am unsure how to resolve this issue. Any advice or suggestions would be greatly appreciated.
$('.button').hover(function(){
$(this).addClass('hoverbutton', 200);
}, function(){
$(this).removeClass('hoverbutton', 200);
});
The problem seems to occur when quickly moving the cursor from one button to another before the fading animation on the first button has completed.
Even using stop() did not solve the issue, as the hover class still remained stuck.
$('.button').hover(function(){
$(this).stop().addClass('hoverbutton', 200);
}, function(){
$(this).stop().removeClass('hoverbutton', 200);
});