このページの本文へ

DESIGN 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
サンプル01
サンプル01の実行画面。要素が少しずつ表示されながら拡大している

 アニメーションのスピードは slownormafast のいずれか、またはミリ秒(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(実行結果)

サンプル02
サンプル02の実行画面。サンプル01の処理が終わった後に青色に変わる

jQuery

「まとめて読みたい!」との読者のみなさまの声にお応えし、この連載が本になりました。書籍版はさらに読みやすく加筆修正のうえ、書き下ろしのコラムや記事公開後のアップデート情報も盛り込んでいます。

Web制作の現場で使う
jQueryデザイン入門

本体 3,330円+税、B5変形判344ページ(オール4色刷)
ISBN978-4-04-868411-8

Amazon.co.jpで買う 楽天ブックスで買う

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

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

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

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

ランキング