jqueryを使用してfadeInをToggleClassにする方法

Question

私は自分のウェブサイトでさまざまなアニメーションのセットを作ろうとしています。 たとえば、ヘッダー/段落/スパンを含むHTMLタグがいくつかあります。 フェードインしている間にヘッダーの色を変更し、別の色などでフェードインする段落を取得したいと考えています。ここ は私のhtmlの例です：CSSの例です

$(document).ready(function(){ 
    $("button").click(function(){ 
     $("h1").toggleClass("blue"); 
     $("h2").toggleClass("yellow"); 
     $("p").toggleClass("red"); 
    }); 
}); 

：

<button>Toggle Me</button> 
<h1>My First Line</h1> 
<h2>The Second Line</h2> 
<p>This is a paragraph.</p> 
<span>This is a span.</span> 

そして、ここでは、私が試した少しのjQueryの例だ

.blue { 
    color: blue; 
} 

上の任意のアドバイスどのようにこの作品を作っていただければ幸いですか：

Answer 1

fa

.blue { 
    color: blue; 
} 
.yellow { 
    color: yellow; 
} 
.red { 
    color: red; 
} 
.gray{ 
    color: gray; 
} 
.hide{ 
    display:none; 
} 

そして、それはあなた、私が使用する方法は次のとおりですので、次のようにHTMLタグにクラスの皮を追加 ：

<button>Toggle class</button> 
<h1 class="hide">My First Line</h1> 
<h2 class="hide">The Second Line</h2> 
<p class="hide">This is a paragraph.</p> 
<span class="hide">This is a span.</span> 

また、あなたはCSSでそれを定義する必要がありますdeInは、次のコードを試してみてくださいスクリプト内：

$(document).ready(function(){ 
    $("button").click(function(){ 
     $("h1").fadeIn(4000).toggleClass("blue"); 
     $("h2").fadeIn(4000).toggleClass("yellow"); 
     $("p").fadeIn(4000).toggleClass("red"); 
     $("span").fadeIn(4000).toggleClass("gray"); 
    }); 
}); 

いつでも4000 = 4秒を任意の値に変更できます。 そして、あなたのために最高の色とクラスを変更してください。

Answer 2

あなたは、おそらく以下のCSSがh1タグのスクリプトで動作するはずCSS transitions

を使用する：あなたはあまりにも他のクラスを作成することができるはずです。これにより

h1 { 
    opacity: 0; 
} 

.blue { 
    color: blue; 
    opacity: 1; 
    transition: opacity 300ms ease-out; 
} 

。

最初にコンテンツを完全に非表示にしたい場合は、最初のCSSにdisplay: none;を追加し、クラスにdisplay: block;を追加することができます。