このページの本文へ

jQueryによるアニメーションエフェクトの基本

2009年09月17日 10時00分更新

西畑一馬/to-R

  • この記事をはてなブックマークに追加
本文印刷

フェードイン・フェードアウトで表示状態を切り替えるfadeIn()/fadeOut()

 fadeIn()fadeOut()は、その名の通り、フェードイン/フェードアウトしながらHTML要素の表示/非表示を切り換える命令です。透明度(CSSのopacityプロパティ)の値を徐々に変更することで、フェードイン/フェードアウト効果を実現しています。これまで紹介してきた他のアニメーションエフェクトの命令と同様、括弧内にはアニメーションのスピードとコールバック関数を指定できます。


$(セレクター).fadeIn(スピード,コールバック関数);


$(セレクター).fadeOut(スピード,コールバック関数);


 次のサンプルは、img要素をあらかじめCSSで非表示(display:none;)に設定しておき、「表示」ボタンがクリックされると、フェードインしながら表示します。「非表示」ボタンがクリックされると、今度は逆にimg要素をフェードアウトしながら非表示に切り換えます。


サンプル08(CSS部分)


img{
    display:none;
}


サンプル08(スクリプト部分)


$(function(){
    $("button#fadeIn").click(function(){
        $("img:not(:animated)").fadeIn("slow");
    })
    $("button#fadeOut").click(function(){
        $("img:not(:animated)").fadeOut("slow");
    })
})


サンプル08(HTML部分)


<button id="fadeIn">表示</button>
<button id="fadeOut">非表示</button>
<p><img src="flower.jpg" alt="flower" /></p>


サンプル08(実行結果)

サンプル08
サンプル08
サンプル08の実行画面。フェードイン(フェードアウト)しながら画像を表示(非表示)する

透明度を徐々に変更するfadeTo()

 fadeTo()は、セレクターで指定した要素の透明度(CSSのopacityプロパティ)を、設定した値に徐々に変更する命令です。fadeTo(...) の括弧内には、スピード、透明度、コールバック関数を記述します。透明度は0(非表示)~1(表示)の間で自由に指定でき、たとえば「0.5」とすると透明度は50%になります。


$(セレクター).fadeIn(スピード,透明度,コールバック関数);



 次のサンプルは、「表示」ボタンが押されるとimg要素の透明度を「1」に、「半透明」ボタンが押されると「0.5」に、「非表示」が押されると「0」に変更します。

サンプル09(スクリプト部分)


$(function(){
    $("button#fade100").click(function(){
        $("img:not(:animated)").fadeTo("slow",1);
    })
    $("button#fade50").click(function(){
        $("img:not(:animated)").fadeTo("slow",0.5);
    })
    $("button#fade0").click(function(){
        $("img:not(:animated)").fadeTo("slow",0);
    })
})


サンプル09(HTML部分)


<button id="fade100">表示</button>
<button id="fade50">半透明</button>
<button id="fade0">非表示</button>
<p><img src="flower.jpg" alt="flower" /></p>

サンプル09(実行結果)

サンプル09
サンプル09の実行画面。表示/半透明/非表示を切り換える



【実務でハマる落とし穴】

fadeOut("slow") と fadeTo("slow",0)は同じ?

 fadeIn()fadeOut()fadeTo()は、要素の透明度を徐々に変更することでフェード効果を実現するという点ではよく似ています。では、要素を非表示にする fadeTo("slow",0); fadeOut("slow");の実行結果は同じでしょうか?

 答えは違います。fadeOut("slow");opacityプロパティの値を徐々に変更し、最終的にはdisplayプロパティをnoneに設定します。これに対して、fadeTo("slow",0);はあくまでもopacityプロパティの値を0にするだけです。displayプロパティはblockのままで、見た目上、透明になっただけですので、要素の存在するスペースは確保されます。

fadeOut()とfadeTo()
fadeOut()とfadeTo()の違い。fadeTo()は要素が透明になっただけで、スペースは確保されたまま
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く

ランキング