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 does not seem to display the animation I was after. This means that the li completely disappears.

Basically I need to remove the “current” class with the fade effect and then add it to the next “li” with the fade effect

thank

Answer 1

Not sure if you can do this with direct jQuery, but I know that the jQuery user interface has a modified removeClass () that allows you to add duration to remove the jQuery UI Docs class

Answer 2

. jQuery, .animate().

li, .next().

Answer 3

AFAIK I don't think you can add fadeOut () to removeClass (). Someone will correct me if I am wrong!

Answer 4

Yes, you can do it with CSS3.

You just add the following to .current.

.current{
    color: #f00;
    background-color: #000;
    transition: color 0.5s, background-color 0.5s;
    -webkit-transition: color 0.5s, background-color 0.5s; /* Safari */
}

Obviously, you need to change the color / background color to the attributes you want to animate. Otherwise, the Cubed Eye suggestion including JqueryUI is great, since removeClass in jQueryUI will do all this for you.