removeClass and fade animation

Question

I have this code

<ul class="nav sub_nav_home">
    <li id="sub_nav_home1"><a href="#"><span>LINK1</span></a></li>
    <li id="sub_nav_home2"><a href="#"><span>LINK2</span></a></li>
    <li id="sub_nav_home3"><a href="#"><span>LINK3</span></a></li>
</ul>

$("ul.sub_nav_home li").hover(function() {
    $(this).removeClass("current").fadeOut();
});

this doesn't seem to display the animation I was after. What this does is making the "li" to dissapear completely.

Basically what I need is to remove the class "current" with a fade out effect and then add it to the next "li" with a fade in effect

Thanks

Answer 1

not sure if you can do this with straight jQuery, but I know jQuery UI has a modified removeClass() that lets you add a duration to remove the class over jQuery UI Docs

Answer 2

You can't fade from one class to another. You have to tell jQuery what properties to animate in the .animate() method.

To get the next li element, use .next().