removeClass y desvanecerse animación

Question

que tienen el código

<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(); 
}); 

esto no parece para visualizar la animación que estaba buscando. Lo que hace es hacer que el "li" desaparezca por completo.

Básicamente lo que necesito es para eliminar la clase "actual" con un efecto de fundido y luego añadirlo a la siguiente "li" con un efecto de fundido de

Gracias

Answer 1

No puede desaparecer de una clase a otra. Tienes que decirle a jQuery qué propiedades animar en el método .animate().

Para obtener el siguiente elemento li, use .next().

Answer 2

AFAIK no creo que pueda agregar un fadeOut() a un removeClass(). ¡Que alguien me corrija si me equivoco!

Answer 3

no está seguro de si se puede hacer esto con jQuery recta, pero sé jQuery UI tiene una removeClass modificado() que le permite agregar una duración de eliminar la clase más jQuery UI Docs

Answer 4

Sí, se puede hacer esto con algunos CSS3.

Simplemente agregue lo siguiente a .corrent.

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

Obviamente, tendrá que cambiar el color/color de fondo de los atributos que desea animar. De lo contrario, la sugerencia de Cubed Eye de incluir JqueryUI es genial, ya que removeClass en jQueryUI lo hará todo por ti ..