Web制作の現場で使えるjQuery　UIデザイン入門 ― 第11回

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の実行画面。フェードイン(フェードアウト)しながら画像を表示(非表示)する

透明度を徐々に変更する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の実行画面。表示／半透明／非表示を切り換える

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

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のままで、見た目上、透明になっただけですので、要素の存在するスペースは確保されます。