jQuery .addClass and .fadeIn?

Question

So, I have these h1 elements that are links and I want to add a class to them and fade that class in once the element has been hovered over, and then onMouseOut have the class removed, whilst fading the class. But using the fade function does nothing for me. Seeing as it hides the element. Any ideas?

jQuery(".categories h1 a").hover(
function () {
    jQuery(this).fadeIn("slow").addClass("active");
},
function(){
    jQuery(this).fadeOut("slow").removeClass("active");
});
});

Thanks!

EDIT:::

jQuery("h1").hover(function() {
      jQuery(this).stop().animate({ backgroundColor: "#a7bf51"}, 800);
      },function() {
      jQuery(this).stop().animate({ backgroundColor: "#FFFFFF"}, 800);
      });
});

Answer 1

If you dont wanna use jquery UI because it will be an extra load, you can do the following :

(was useful to me when the 'hidden' bootstrap class is used in my app)

Fade In slowly while removing the class :

$('.myClass').removeClass('hidden').fadeOut(0).fadeIn(10000)

Fade Out slowly, add the class and then fade back in:

$('.myClass').fadeOut(1000, function(){
    $(this).addClass('hidden'); //or any other class
}).fadeIn(10000)

hope this will simplify someone's task!