jQuery fadeIn CSS class

Question

I'm trying to do simple fadeIn() CSS class on certain objects that have the "button" class. I want to fadeIn the "hoverbutton" class on hover and then fadeOut when their mouse leaves the item.

I found this in the questions. It seemed to work well until i noticed when i hover over multiple buttons quickly some get stuck on the "hoverbutton" class. Not a clue how to fix that. Any suggestions would be great.

$('.button').hover(function(){
    $(this).addClass('hoverbutton', 200);
}, function(){
    $(this).removeClass('hoverbutton', 200);
});

it seems they get stuck when i hover over one and quickly jump to another item with that class before the fading on the first one is complete.

stop()ing produced the same result. hover class still gets stuck

$('.button').hover(function(){
  $(this).stop().addClass('hoverbutton', 200);
}, function(){
  $(this).stop().removeClass('hoverbutton', 200);
});

Answer 1

The problem is because jQueryUI is using the style property to do the animation, and if it doesn't complete (because the hover-out occurs before hover-in finishes) the class it's animating to isn't actually added, and so can't be removed by the hover-out.

To fix this, we need to do two things on the hover-out:

• stop the addClass() animation
• remove any temporary style created by the addClass() animation

Like so..

$('.button').hover(function() {
    $(this)
        .addClass('hoverbutton', 200);
}, function() {
    $(this).stop()
        .attr("style", "")
        .removeClass('hoverbutton', 200);
});

Here's an example: http://jsfiddle.net/RBTT8/