フェードイン・フェードアウトで表示状態を切り替える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(実行結果)
透明度を徐々に変更する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(実行結果)
【実務でハマる落とし穴】
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のままで、見た目上、透明になっただけですので、要素の存在するスペースは確保されます。
ソーシャルリアクション
この連載の記事
一覧へWebPro
jQueryとAjaxで作るスムーズページング
WebデザイナーのためのjQuery入門。jQueryのAjax機能を使ってスムーズなページングを実現する方法をチュートリアルで解説する。