removeClass and fade animation
<p>I have this code</p>

<pre><code>&lt;ul class="nav sub_nav_home"&gt;
    &lt;li id="sub_nav_home1"&gt;&lt;a href="#"&gt;&lt;span&gt;LINK1&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li id="sub_nav_home2"&gt;&lt;a href="#"&gt;&lt;span&gt;LINK2&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li id="sub_nav_home3"&gt;&lt;a href="#"&gt;&lt;span&gt;LINK3&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

$("ul.sub_nav_home li").hover(function() {
    $(this).removeClass("current").fadeOut();
});
</code></pre>

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

<p>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</p>

<p>Thanks</p>
