Incorporating Fade into addClass jQuery

Question

I have this simple code:

$('.featureItems li').hover(
       function(){ $(this).addClass('hover') },
       function(){ $(this).removeClass('hover') }
)

How can i incorporate a fade effect, so the add/remove class is a little more gradual?

Would i require animate()?

Thanks

Answer 1

If you're also using jQuery UI, it improves the CSS add/remove methods so that they accept a second parameter that's a delay (in milliseconds) to animate the CSS change over. To animate the change over a half-second, for example:

$('.featureItems li').hover(
   function(){ $(this).addClass('hover', 500) },
   function(){ $(this).removeClass('hover', 500) }
)

Update:

To prevent the animation queue from getting jammed up or inconsistent during quick hover in/out sequences, you can also force existing animations to stop before starting the add/removeClass:

$('.featureItems li').hover(
   function(){ $(this).stop(true).addClass('hover', 500) },
   function(){ $(this).stop(true).removeClass('hover', 500) }
)