jQuery: jak przejść między klasami?

Question

Muszę być w stanie przeniknąć między klasami i płynnie przejść do wszystkich stylów zastosowanych do elementu i jego elementów potomnych. Jak to zrobić za pomocą jQuery? Wiem, jak dodawać/usuwać klasy, ale to nie jest to samo, co ładne przejście między dwoma drastycznie różnymi kolorami.

Answer 1

jQuery UI posiada funkcję toggleClass który ma argument za czas trwania:

http://jqueryui.com/demos/toggleClass/

na przykład, zrobić to na jednej z moich stron (pojawianie się/z klasy light i zanikać/w z klasy dark)

$('body').toggleClass('light', 250).toggleClass('dark', 250); 

Answer 2

Zapoznaj się z wtyczki kolor dla jQuery: https://github.com/jquery/jquery-color

Answer 3

Spróbuj zaniknąć.

$(".myClass").fadeIn("slow"); 

http://api.jquery.com/fadeIn/

Chociaż w zależności od złożoności może trzeba jQuery UI jako inny wspomniałem.

Answer 4

Czy to właśnie chcesz osiągnąć? Here's the jsFiddle

HTML:

<input type="button" id="toggle" value="toggle" /> 
<br /> 
<div id="classContainer"> 

    <div id = "class1"> 

    </div> 
    <div id = "class2"> 
    </div> 
</div> 

jQuery:

$("#toggle").click(function(){ 
    if ($("#class1").is(":visible")) { 
     $("#class1").fadeOut(); 
     $("#class2").fadeIn(); 
    } 
    else { 
     $("#class1").fadeIn(); 
     $("#class2").fadeOut(); 
    } 
}); 

CSS:

#classContainer 
{ 
    position: relative; 
} 

#class1, #class2 
{ 
    height: 100px; 
    width: 100px; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

#class1 
{ 
    background-color: red; 
    display: none; 
} 

#class2 
{ 
    background-color: blue; 
}