テキストや画像をフワッと出現させるfadeIn()やスーッと消したりするfadeOut()それらを交互に処理してくれるfadeToggle()を中心にご紹介します。
jQueryで記述してもいいのですが、個人的にアニメーションなどの装飾的な部分はCSSのアニメーションで処理することが多く、classを付与して動作させる方法も併せてご紹介します。
とても簡単に実装可能ですので、試してみてください。
フェードイン
ページの読み込み時やクリックやスクロールなどのイベント発生時に、フワッと出現させる方法です。
構文
jQuery
|
1 |
$('div').fadeIn(700); |
フェードインさせたい要素にfadeIn()を指定するだけです。とても簡単ですね。
()の引数には動作にかかる時間をslownormalfastかミリ秒で指定します。
slowは600ミリ秒fastは200ミリ秒で、指定しなかった場合はデフォルトの400ミリ秒で動作します。
例えば上記の例だと(700)ですが、これは0.7秒なので、0.7秒かけてフワッとフェードインさせます。
ちなみに、メソッド名のIだけ大文字のキャメルケースになっているので注意しましょう。
fadeIn()
キャメルケース（英: camelcase）は、複合語をひと綴りとして、要素語の最初を大文字で書き表すことをいう。キャメルケースとは、大文字が「らくだのこぶ」のように見えることからの命名である。
ページの読み込み時にフェードインさせるサンプル
それではfadeIn()を使って、ページを読み込んだ際にフワッと要素を表示させてみましょう。
HTML
|
1 2 3 4 5 |
<div> <p>ようこそ！</p> <p>今回はフェードインのご紹介！</p> <p>とは言っても簡単に実装できます。</p> </div> |
jQuery
|
1 2 3 4 5 6 |
$(function() { // 一旦hide()で隠してフェードインさせる $('div').hide().fadeIn('slow'); }); |
結果（動作サンプル）
F5キー(Macはcommand+r)を押してページを再読込させると、以下にフワッと表示されるかと思います。
ようこそ！
今回はフェードインのご紹介！
とは言っても簡単に実装できます。
div要素をフワッとフェードインさせたいのでhide()で一旦非表示にしてfadeIn()でフェードインさせました。
ただ、場合によっては読み込み時に隠したい要素が一瞬表示されたりすることもあるため、hide()を使わずにCSSのdisplay: none;で要素を隠してもいいでしょう。
いずれにしても要素を隠さないとフェードインできません。
クリックしたらフェードインで表示させるサンプル
次に、クリックしたら要素フェードインさせてみましょう。
今度はあらかじめCSSで要素を隠しておきます。
HTML & CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<style> div { display: none; } </style> <button>表示させる</button> <div> <p>ようこそ！</p> <p>今回はフェードインのご紹介！</p> <p>とは言っても簡単に実装できます。</p> </div> |
jQuery
|
1 2 3 4 5 6 7 8 9 10 |
$(function() { // ボタンをクリックしたら発動 $('button').click(function() { // 1.5秒かけてゆっくりフェードインさせる $('div').fadeIn(1500); }); }); |
結果（動作サンプル）
以下ボタンをクリックすると、フワッとフェードインするかと思います。
ようこそ！
今回はフェードインのご紹介！
とは言っても簡単に実装できます。
まずCSSのdiplay: none;で要素を隠し、ボタンをクリックするとゆっくりとフェードインしました。
参考：jQueryのclick()で処理を実行&無効にする方法
CSSでフェードインさせるサンプル
上記のようにjQueryでもフェードインはできますが、こういった装飾的なアニメーションなどはCSSで行う方法も推奨されます。
あらかじめCSSにアニメーションのスタイルを記述したclassを用意しておき、jQueryでそのclass名を追加し、フェードインさせます。
CSSのdisplayは使えないため、opacity: 0;で要素を透明にしておきます。
HTML & CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<style> div { opacity: 0; transition: .7s; } div.show { opacity: 1; } </style> <button>表示させる</button> <div> <p>ようこそ！</p> <p>今回はフェードインのご紹介！</p> <p>CSSでも簡単に実装できます。</p> </div> |
jQuery
|
1 2 3 4 5 6 7 8 9 10 |
$(function() { // ボタンをクリックしたら発動 $('button').click(function() { // class'show'をdiv要素に追加 $('div').addClass('show'); }); }); |
結果（動作サンプル）
以下ボタンをクリックすると、フワッとフェードインするかと思います。
ようこそ！
今回はフェードインのご紹介！
CSSでも簡単に実装できます。
まずCSSの設定ですが、フェードインさせる要素はopacity: 0;で透明にしておきtransition: .7s;を仕込んでおきます。
そしてクリック後に要素に付加されるクラス.showにはopacity: 1;を指定します。
ボタンをクリックすると上記で設定した.showが要素に付加され、ゆっくりとフェードインしました。
ちなみにopacityは要素を透明度を指定するCSSで0が透明1が不透明です。
transition: .7s;は0.7秒かけてアニメーションさせるCSSです。
opacityを使用したため、displayと違って要素の高さは確保されたままです。
スライドしながらフェードインさせるサンプル
CSSを使ったテクニックですが、フェードインさせる際に下から上に要素をスライドさせながら表示させます。
より凝ったアニメーションを使いたい場合にオススメですね。
HTML & CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<style> div { opacity: 0; transition: .7s; margin-top: 60px; } div.showUp { opacity: 1; margin-top: 0; } </style> <button>表示させる</button> <div> <p>ようこそ！</p> <p>今回はスライドしながらのフェードインのご紹介！</p> <p>CSSで簡単に実装できます。</p> </div> |
jQuery
|
1 2 3 4 5 6 7 8 9 10 |
$(function() { // ボタンをクリックしたら発動 $('button').click(function() { // class'showUp'をdiv要素に追加 $('div').addClass('showUp'); }); }); |
結果（動作サンプル）
以下ボタンをクリックすると、フワッとスライドしながらフェードインするかと思います。
ようこそ！
今回はスライドしながらのフェードインのご紹介！
CSSで簡単に実装できます。
まずCSSの設定ですが、前項で設定したスタイルにさらにmargin-top: 60px;を追加し、あらかじめ要素を下げておきます。
そしてボタンをクリックした際にクラス.showUpを付加し、margin-topを0にすることで上にスライドさせています。
簡単に一工夫するだけで、より凝ったアニメーションが実装できますね。
フェードアウト
すでに表示されている要素をスーッと消す方法です。
構文
jQuery
|
1 |
$('div').fadeOut('fast'); |
フェードアウトさせたい要素にfadeOut()を指定するだけです。とても簡単ですね。
()の引数には動作にかかる時間をslownormalfastかミリ秒で指定します。
例えば上記の例だと('fast')ですが、これは素早くフワッとフェードアウトさせます。
文字列を指定する際は''（クォーテーション）を忘れずに付けましょう。
クリックしたらフェードアウトで消すサンプル
クリックしたら要素フェードアウトさせてみましょう。
HTML & CSS
|
1 2 3 4 5 6 |
<button>消す</button> <div> <p>ようこそ！</p> <p>今回はフェードアウトのご紹介！</p> <p>誰でも簡単に実装できます。</p> </div> |
jQuery
|
1 2 3 4 5 6 7 8 9 10 |
$(function() { // ボタンをクリックしたら発動 $('button').click(function() { // 素早くフェードアウトさせる $('div').fadeOut('fast'); }); }); |
結果（動作サンプル）
以下ボタンをクリックすると、スーッとフェードアウトするかと思います。
ようこそ！
今回はフェードアウトのご紹介！
誰でも簡単に実装できます。
ボタンをクリックするとすでに表示されているテキストが、ゆっくりとフェードアウトしました。
CSSでフェードアウトさせるサンプル
上記のようにjQueryでもフェードアウトはできますが、前述の通り装飾的なアニメーションなどはCSSで行う方法も推奨されます。
あらかじめCSSにアニメーションのスタイルを記述したclassを付加しておき、jQueryでそのclass名を削除し、フェードアウトさせます。
CSSのdisplayは使えないため、opacity: 1;で要素を表示しておきます。
HTML & CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<style> div { opacity: 0; transition: .7s; } div.show { opacity: 1; } </style> <button>表示させる</button> <div class="show"> <p>ようこそ！</p> <p>今回はフェードアウトのご紹介！</p> <p>CSSでも簡単に実装できます。</p> </div> |
jQuery
|
1 2 3 4 5 6 7 8 9 10 |
$(function() { // ボタンをクリックしたら発動 $('button').click(function() { // class'show'を削除 $('div').removeClass('show'); }); }); |
結果（動作サンプル）
以下ボタンをクリックすると、スーッとフェードアウトするかと思います。
ようこそ！
今回はフェードアウトのご紹介！
CSSでも簡単に実装できます。
まずCSSの設定ですが、フェードアウトさせる要素に前項で設定したクラス.showを付加しておきます。
ボタンをクリックすると上記で設定した.showが要素から削除され、フェードアウトしました。
スライドしながらフェードアウトさせるサンプル
CSSを使ったテクニックですが、フェードアウトさせる際に上から下に要素をスライドさせながら消します。
HTML & CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<style> div { opacity: 0; transition: .7s; margin-top: 60px; } div.showUp { opacity: 1; margin-top: 0; } </style> <button>消す</button> <div> <p>ようこそ！</p> <p>今回はスライドしながらのフェードアウトのご紹介！</p> <p>CSSで簡単に実装できます。</p> </div> |
jQuery
|
1 2 3 4 5 6 7 8 9 10 |
$(function() { // ボタンをクリックしたら発動 $('button').click(function() { // class'showUp'をdiv要素から削除 $('div').addClass('showUp'); }); }); |
結果（動作サンプル）
以下ボタンをクリックすると、スーッとスライドしながらフェードアウトするかと思います。
ようこそ！
今回はスライドしながらのフェードアウトのご紹介！
CSSで簡単に実装できます。
まずCSSの設定ですが、スライドしながらフェードアウトさせる要素に前項で設定したクラス.showUpを付加しておきます。
ボタンをクリックすると上記で設定した.showUpが要素から削除され、スライドしながらフェードアウトしました。
フェードインとフェードアウトを交互に繰り返す
フェードインとフェードアウトを交互に繰り返す方法です。
要素が隠れていたらフェードイン、要素が表示されていたらフェードアウトと勝手に判断して処理してくれるので便利ですね。
構文
jQuery
|
1 |
$('div').fadeToggle(1000); |
フェードインさせたい要素にfadeToggle()を指定するだけです。とても簡単ですね。
()の引数には動作にかかる時間をslownormalfastかミリ秒で指定します。
例えば上記の例だと(1000)ですが、これは1秒なので、1秒かけてフワッとフェードインさせます。
クリックするたびにフェードインとフェードアウトを繰り返すサンプル
それではfadeToggle()を使って、フェードインとフェードアウトを繰り返してみましょう。
クリックを連打すると指定回数分処理しようと暴走するので、その対策もしています。
HTML
|
1 2 3 4 5 |
<div> <p>ようこそ！</p> <p>今回はフェードトグルのご紹介！</p> <p>連打にも適切に対応しました。</p> </div> |
jQuery
|
1 2 3 4 5 6 7 8 9 10 |
$(function() { // ボタンをクリックしたら発動 $('button').click(function() { // 連打で暴走しないようにstop()も設定 $('div').stop().fadeToggle(1000); }); }); |
結果（動作サンプル）
以下ボタンをクリックするたびにフェードインとフェードアウトを繰り返すかと思います。
ようこそ！
今回はフェードトグルのご紹介！
連打にも適切に対応しました。
100回素早くクリック連打すると処理がそのスピードに追いつかず、連打が終わった後も100回処理を継続しようとします。
そこで、要素にfadeToggle()を指定する際stop()を挟むことで、ボタンを連打しても連打を中止すると処理も止まるようになります。
スライドしながらフェードインとフェードアウトを繰り返すサンプル
toggleClassを使い、フェードインとフェードアウトを交互にスライドさせながら繰り返します。
HTML & CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<style> div { opacity: 0; transition: .7s; margin-top: 60px; } div.showUp { opacity: 1; margin-top: 0; } </style> <button>クリック</button> <div> <p>ようこそ！</p> <p>今回はスライドしながらのフェードトグルのご紹介！</p> <p>CSSで簡単に実装できます。</p> </div> |
jQuery
|
1 2 3 4 5 6 7 8 9 10 |
$(function() { // ボタンをクリックしたら発動 $('button').click(function() { // toggleClassでクラスの付け外しを繰り返す $('div').toggleClass('showUp'); }); }); |
結果（動作サンプル）
以下ボタンをクリックすると、スーッとスライドしながらフェードインとフェードアウトを繰り返すかと思います。
ようこそ！
今回はスライドしながらのフェードトグルのご紹介！
CSSで簡単に実装できます。
toggleClass()でスタイルが設定されたクラスを付けたり外したりしています。
それによってスライドしながらのフェードインとフェードアウトを交互に繰り返しています。
参考：toggleClass() でclassの追加または削除
なぜかフェードインしない
なぜかフワッとフェードイン（フェードアウト）してくれないことがあります。
以下のような原因がありますので、上手くいかない人はチェックしてみてはいかがでしょうか。
すでに要素が表示されている
fadeIn()は隠れた要素をフェードインしながら表示させるメソッドです。
最初から表示されている要素は当然ながら動作しません。
opacityで透明にしている
cssのopacity: 0;で透明にしている場合でもfadeIn()は動作しません。
display: none;で要素を隠すか、fadeIn()ではなくcssのopacity: 1;で表示させましょう。
cssのtransitionを設定している
cssのtransitionを設定している要素に、fadeIn()を指定するとなぜか上手くフェードインしてくれません。
どちらもアニメーションに関する命令ですが、jQueryでフェードインさせるかcssでフェードインさせるかどちらかに統一したほうがよいでしょう。
