※この記事は「Web制作の現場で使えるjQuery UIデザイン入門」の第11回です。過去の記事もご覧ください。
jQueryの特徴の1つは、Webサイトに動きを付ける「アニメーションエフェクト」を手軽に実装できることです。jQueryで実現できるのは、セレクターで指定したHTML/XHTML(以下、HTML)要素のサイズや位置、透明度を時間の経過とともに徐々に変化させ、動いているように見せる簡単なアニメーションですが、最近のWebデザインで用いられる“動きのあるUI”を作るのには重宝します。
今回は、jQueryに用意されているアニメーションエフェクト関連の命令を紹介します。
非表示状態の要素を表示するshow()
show()は、CSSのdisplayプロパティの値が「none」、つまり非表示に設定されているHTML要素を、アニメーション付きで表示状態(display:bolck;)に切り換える命令です。要素の透明度を透明から不透明にしながら、サイズ(高さ/幅)を0から本来のサイズに変化させます。対象となる要素はセレクターで指定し、show(...) の括弧内にはアニメーションのスピードを指定します。
$(セレクター).show(スピード);
次のサンプルでは、button要素をクリックすると、CSSで非表示(display:none;)に設定されている赤色のdiv要素が、左上から右下方向へ少しずつ拡大しながら表示されます。
▼サンプル01(CSS部分)
div{
width:200px;
height:200px;
background:red;
display:none;
}
▼サンプル01(スクリプト部分)
$(function(){
$("button").click(function(){
$("div").show("slow");
})
})
▼サンプル01(HTML部分)
<button>表示</button>
<div></div>
▼サンプル01(実行結果)
アニメーションのスピードは slow/norma/fast のいずれか、またはミリ秒(1秒=1000秒)で指定できます。ミリ秒で指定する数字は、"(ダブルクォーテーション)で囲う必要はありません。たとえば以下の場合は、1000ミリ秒、つまり1秒間かけてdiv要素を表示します。
$("div").show(1000);
show() は、括弧内に記述するスピードの指定を省略すると、アニメーション処理をせず、非表示の要素を即座に表示します。
$("div").show();
この場合、jQueryを使った以下の記述と同じ実行結果になります。
$("div").css("display","block");
■show()にコールバック関数を設定する
show(...) は、スピードの後ろに,(カンマ)区切りでコールバック関数を設定できます。
$(セレクター).show(スピード,コールバック関数);
コールバック関数は、アニメーション処理が終わった後に続けて実行される命令です。「処理が終わったら、この関数を呼び出して」と指定するのでコールバック関数と呼ばれます。function(){...} で指定し、{...} 内に命令を記述します。jQueryはメソッドチェーンで続けて実行する命令を記述できますが、メソッドチェーンで記述した命令がアニメーションの終了を待たずにすぐに実行されるのに対して、コールバック関数として記述した命令はアニメーションが完了してから実行されます。
以下のサンプルでは、サンプル01にコールバック関数を追加し、アニメーションが終了した後にcss()でdiv要素を青色に変更しています。
▼サンプル02(スクリプト部分)
$(function(){
$("button").click(function(){
$("div").show("slow",function(){
$(this).css("background","blue");
});
})
})
▼サンプル02(実行結果)
ソーシャルリアクション
この連載の記事
一覧へ
WebPro
jQueryとAjaxで作るスムーズページング
WebデザイナーのためのjQuery入門。jQueryのAjax機能を使ってスムーズなページングを実現する方法をチュートリアルで解説する。