removeClass und verblassen Animation

Question

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

dies scheint nicht die Animation war ich nach anzuzeigen. Was dies bewirkt, ist, das "li" vollständig verschwinden zu lassen.

Im Grunde, was ich brauche, ist die Klasse „Strom“ mit einem Fade-Out-Effekt zu entfernen und sie dann mit einem Fade-in-Effekt

Dank

Answer 1

Sie können auf die nächste „li“ hinzufügen nicht verblassen von einer Klasse zur anderen. Sie müssen jQuery mitteilen, welche Eigenschaften in der .animate() -Methode animiert werden sollen.

Um das nächste li-Element zu erhalten, verwenden Sie .next().

Answer 2

AFAIK ich glaube nicht, dass Sie eine fadeOut() zu einer removeClass() hinzufügen können. Jemand korrigiert mich, wenn ich falsch liege!

Answer 3

nicht sicher, ob Sie diese mit geraden jQuery tun kann, aber ich weiß, jQuery UI eine modifizierte removeClass(), die Sie mit einer Dauer hinzufügen können, die Klasse über jQuery UI Docs

Answer 4

Ja zu entfernen, können Sie dies tun mit etwas CSS3.

Sie fügen nur folgendes zu .current hinzu.

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

Offensichtlich müssen Sie Farbe/Hintergrundfarbe zu den Attributen ändern, die Sie animieren möchten. Ansonsten ist der Vorschlag von Cubed Eye, JqueryUI einzuschließen, großartig, da die removeClass in jQueryUI alles für Sie erledigt.