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

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

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

文● 西畑一馬／to-R

※この記事は「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（実行結果）


サンプル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");
        });
    })
})