jQuery: sınıflar arasında nasıl kaybolulur?

Question

Sınıflar arasında kaybolup, öğeye ve çocuklarına uygulanan tüm stilleri sorunsuzca değiştirebilmem gerekir. Bu jQuery kullanılarak nasıl yapılabilir? Sınıfları nasıl ekleyeceğimi/kaldırılacağını biliyorum, ancak bu iki farklı renk arasında güzel bir geçişle aynı şey değil.

Answer 1

jQuery UI süresince bir argüman olan bir toggleClass işlevi vardır: Örneğin

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

, benim sitelerinden biri bunu yapmak (giriş/çıkış light sınıfı fade ve dark sınıf üzerinden/kararma):

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

Answer 2

Kontrol dışarı jQuery için renk eklentisi: https://github.com/jquery/jquery-color

Answer 3

FadeIn'i deneyin.

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

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

rağmen diğer belirtildiği gibi jQuery UI gerekebilir karmaşıklığına bağlı.

Answer 4

Bu, yapmaya çalıştığınız şey bu mu? 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; 
}