jQuery：クラス間でフェードする方法は？

Question

私はクラス間でフェードすることができ、エレメントとその子に適用されているすべてのスタイルをシームレスに移行する必要があります。これはjQueryを使ってどのように行うことができますか？私はクラスを追加/削除する方法を知っていますが、それは2つの劇的に異なる色の間の良い移行と同じではありません。

Answer 1

jQueryのUIは、期間の引数があるtoggleClass機能があります。たとえば

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

を、私は私のサイトの一つで、これを行います（lightクラスに/フェードアウト及びフェード/でdarkクラス外）：

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

Answer 2

のjQueryの色のプラグインをチェックアウト：https://github.com/jquery/jquery-color

Answer 3

fadeInを試してください。

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

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

他が述べてきたように複雑さに応じて、あなたはjQueryのUIを必要とするかもしれないが。

Answer 4

これは達成しようとしていることですか？ 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; 
}