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

文●西畑一馬/to-R

2009年09月17日 10時00分

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


 アニメーションのスピードは 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(実行結果)



表示中の要素を非表示状態にするhide()

 hide()show()の逆の働きをする命令です。表示状態のHTML要素、つまりCSSのdisplayプロパティがblockに設定されている要素を非表示(display:none;)に変更します。show()と同じく、hide(...)の括弧内にはアニメーションのスピードとコールバック関数を設定でき、指定したスピードで透明度、サイズ(高さ/幅)を変化させながら要素を非表示にします。


$(セレクター).show(スピード,コールバック関数);


 先ほどのshow()を使ったサンプル01に、hide()div要素を非表示にするボタンを追加したのが以下のサンプルです。表示ボタン(id属性がshowbutton要素)がクリックされるとshow()を、非表示ボタン(id属性がhidebutton要素)がクリックされるとhide()を実行し、div要素の表示/非表示を切り換えます。

サンプル03(スクリプト部分)


$(function(){
    $("button#show").click(function(){
        $("div").show("slow");
    })
    $("button#hide").click(function(){
        $("div").hide("slow");
    })
})

サンプル03(HTML部分)


<button id="show">表示</button>
<button id="hide">非表示</button>
<div></div>


サンプル03(実行結果)


 show()と同様に、括弧内のスピードの指定を省略するとアニメーション処理をせず、即座に要素を非表示にします。


$("div").hide();



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

アニメーションが止まらない! を解決する

 サンプル03は、実用上、ちょっとした問題があります。show()hide()は1回のアニメーション処理が終わってから次のアニメーションを実行するため、表示/非表示ボタンをすばやく交互に何度もクリックすると、クリックした回数分のアニメーションが終了するまでしばらく待たなければならないのです。

 この問題を解決するのに便利なのが、jQueryのフィルター「:animated」です。:animatedはアニメーション処理中の要素を選択できるセレクターです。:not()と組み合わせて :not(:animated) と記述すると、“アニメーション処理中ではない要素”(アニメーションしていない要素)を絞り込めます。

 サンプル03を以下のように変更してみましょう。show()hide()のセレクターに注目してください。

サンプル04(スクリプト部分)


$(function(){
    $("button#show").click(function(){
        $("div:not(:animated)").show("slow");
    })
    $("button#hide").click(function(){
        $("div:not(:animated)").hide("slow");
    })
})


 この場合、show()hide()div要素がアニメーションしていない時だけ実行され、アニメーション中の場合は実行されません。これなら、表示/非表示ボタンをすばやく交互にクリックしても、アニメーションが終了するまで待つ必要はありません。



要素の表示/非表示を交互に切り替えるtoggle()

 toggle()は、要素の表示/非表示を交互に切り換える命令です(※)。セレクターで指定した要素が表示されている場合は非表示に、非表示の場合は表示状態に変更します。show()hide()と同様、toggle(...)の括弧内にはアニメーションのスピードとコールバック関数を指定できます。


$(セレクター).toggle(スピード,コールバック関数);


 以下は、button要素がクリックされるたびに、div要素の表示/非表示を交互に切り換えるサンプルです。


サンプル04(スクリプト部分)


$(function(){
    $("button").click(function(){
        $("div:not(:animated)").toggle("slow");
    })
})


サンプル04(HTML部分)


<button>表示・非表示</button>
<div></div>



(※)toggle()には、クリックされるたびに異なる処理を実行する機能もあります。詳しくはイベント処理の回(関連記事)を参照してください。

// h3").css({"font-size":"1.3em", "background-color":"#E6E6FA", "border-bottom":"1px solid #808080", "margin-bottom":"1.2em"}); $("#mainC > h4").css({"font-weight":"bold", "margin-bottom":"1.2em", "color":"#778899"}); }); //]]>

スライドアニメーションで表示/非表示を切り換えるslideDown()/slideUp()

 slideDown()slideUp()は、セレクターで指定した要素の表示/非表示をスライドアニメーション付きで切り換える命令です。slideDown()は非表示の要素の高さを0から本来の高さに近づけながら表示し、slideUp()は表示状態の要素の高さを少しずつ0に近づけながら非表示にします。


$(セレクター).slideDown(スピード,コールバック関数);


$(セレクター).slideUp(スピード,コールバック関数);


 サンプル06は、slideDown()slidUp()を使って、「開閉パネル」(Collapsible-Panel)と呼ばれるUI部品を作成したものです。dt要素がクリックされると、css()を使ってdd要素のdisplayプロパティを調べ、displayプロパティの値がblock<の場合はslideUP()dd要素を非表示に、それ以外ならslideDown()dd要素を表示します。条件の指定には、第8回で解説したif文を使っています。

 dd要素のdisplayプロパティがblockの場合でもアニメーション処理中の可能性があるため、セレクターに:not(:animated)を追加し、アニメーション中でない要素にのみslideUp() を適用しています。

サンプル06(CSS部分)


dl{
    width:300px;
    margin:50px auto;
}
dl dt{
    background:#7CADB6;
    cursor:pointer;
}
dl dd{
    border:1px solid #7CADB6;
    height:300px;
    margin:0;
}


サンプル06(スクリプト部分)


$(function(){
    $("dt").click(function(){
        if($("dd").css("display")=="block"){
            $("dd:not(:animated)").slideUp("slow");
        }else{
            $("dd").slideDown("slow");
        }
    })
})


サンプル06(HTML部分)


<dl>
    <dt>スライドして表示状態を切り替える</dt>
    <dd>
            slideDown()とslideUp()、show()やhide()とは違いスライドアニメーションで表示非表示を切り替える命令です。
    </dd>
</dl>


サンプル06(実行結果)



スライドアニメーションで表示/非表示を交互に切り換えるslideToggle()

 slideToggle()は、前のページで紹介したtoggle()のスライドアニメーション版です。セレクターで指定した要素が表示されている場合は非表示に、非表示の場合は表示状態にスライドアニメーションで切り換えます。


$(セレクター).slideToggle(スピード,コールバック関数);


 以下は、サンプル06をslideToggle()を使って書き直したものです。if文による条件分岐がなくなり、すっきりとしたソースコードになりました。

サンプル07(スクリプト部分)


$(function(){
    $("dt").click(function(){
        $("dd:not(:animated)").slideToggle("slow");
    })
})



【CSSワンポイントレッスン】

マウスカーソルを変更するcursorプロパティを覚えよう

 サンプル06のCSSには、「cursor」というプロパティが登場しています。cursorは、マウスカーソルの形状を指定するプロパティです。HTMLでは、a要素にマウスカーソルを重ねると、カーソルの形がポインター(指の形)に変わり、クリックできる要素だと分かります。ところが、JavaScriptを使ってクリックイベントを設定した要素は、マウスを重ねてもカーソルの形は変わりません。


 CSSでcursorプロパティの値に「pointer」を指定すると、a要素と同じポインターに変更できます。先ほどのサンプル06では、dt要素のcursorプロパティをpointerにすることで、その要素がクリックできることをユーザーに伝えています。

 通常のWebサイト制作では利用する機会が少ないCSSプロパティですが、jQueryなどのJavaScriptを使う場合には覚えておきましょう。


// h3").css({"font-size":"1.3em", "background-color":"#E6E6FA", "border-bottom":"1px solid #808080", "margin-bottom":"1.2em"}); $("#mainC > h4").css({"font-weight":"bold", "margin-bottom":"1.2em", "color":"#778899"}); $("#showProfile").click(function(){ $("#inProfile").load("/elem/000/000/435/435362/index-3.html #aProfile"); return false; }) }); //]]>

フェードイン・フェードアウトで表示状態を切り替える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のままで、見た目上、透明になっただけですので、要素の存在するスペースは確保されます。

// h3").css({"font-size":"1.3em", "background-color":"#E6E6FA", "border-bottom":"1px solid #808080", "margin-bottom":"1.2em"}); $("#mainC > h4").css({"font-weight":"bold", "margin-bottom":"1.2em", "color":"#778899"}); }); //]]>

独自のアニメーションエフェクトを設定できるanimate()

 animate()を使えば、任意のCSSプロパティの値を徐々に変化させることで、さまざまなアニメーションエフェクトを作成できます。animate(...)の括弧内には、CSSプロパティ(プロパティ名と値)、アニメーションのスピード、動きのスタイル(easing)、コールバック関数を指定します。


$(セレクター).animate(値を変更したいCSSプロパティ, スピード, 動き, コールバック関数)


 設定できるCSSプロパティは、heighttopopacityのように、数値(px/em/%)で表せるものに限り、background-colorのように数値以外の値を指定するものには対応していません。CSSプロパティの書き方はjQueryの css() で複数のCSSプロパティを同時に設定する場合と同じです(関連記事)。プロパティ名と値を :(コロン)でつなげ、値は "(ダブルクォーテーション)で囲みます。CSSのプロパティ名に -(ハイフン)が含まれる場合はハイフンを削除し、その後に続く最初のアルファベットを大文字に変更します。複数のCSSプロパティは、グループセレクターのように ,(カンマ)でつなげます。

 動きのスタイルには、「linear」または「swing」を設定できます。linearは常に一定の速度で、swingは最初ゆっくり・後半は速くCSSプロパティの値を変更します。


■画像を左右にスライドして切り換えるサンプル

 サンプル10は、img要素がクリックされると、2枚の画像を左右にスライドさせて切り換えます。

 div要素はあらかじめCSSでwidth:400px; height:267px;とサイズを指定しておき、領域外に表示される要素は非表示になるように overflow:hidden; を設定します。div要素の内側にあるp要素には、2枚の画像(flower.jpg/building.jpg)を横に並べたときにちょうど収まるサイズ(width:800px; height:267px;)を設定します。

 jQueryのスクリプトでは、id属性がflowerの要素がクリックされたときに、animate()p要素のmargin-leftプロパティの値を-400pxに変更するイベント処理を記述します。p要素の位置だけが左に400ピクセル移動し、div要素の表示領域は変わらないため、画像がスライドしながら切り替わっているように見える、というわけです。また、id属性がbuildingの要素がクリックされたときには、margin-leftプロパティの値を0pxに変更し、元の画像に切り替わるように設定しています。

サンプル10(CSS部分)


p{
    width:800px;
    height:267px;
    margin:0;
}
div{
    width:400px;
    height:267px;
    overflow:hidden;
}


サンプル10(スクリプト部分)


$(function(){
    $("#flower").click(function(){
        $("p:not(:animated)").animate({
            marginLeft : "-400px" , 
        },"slow","swing")
    })
    $("#building").click(function(){
        $("p:not(:animated)").animate({
            marginLeft : "0" , 
        },"slow","swing")
    })
})


サンプル10(HTML部分)


<div><p>
    <img src="flower.jpg" alt="flower" id="flower" />
    <img src="building.jpg" alt="building"
</p></div>


サンプル10(実行結果)


 animate()は、サンプル10のように、CSSを理解していればアイデア次第でさまざまなアニメーションエフェクトを作成できます。より実践的な使い方は今後の連載でも触れていく予定ですが、ぜひご自分でも試してみてください。


アニメーションエフェクト関連の命令のまとめ

 最後に、今回の記事で紹介したjQueryのアニメーションエフェクト関連の命令を表にまとめます。

命令 意味
show(...) 要素を徐々に表示する
hide(...) 要素を徐々に非表示にする
toggle(...) 要素の表示/非表示を徐々に切り換える
slideDown(...) 要素をスライドアニメーションで表示する
slideUp(...) 要素をスライドアニメーションで非表示にする
slideToggle(...) 要素の表示/非表示をスライドアニメーションで切り換える
fadeIn(...) 要素をフェードインで表示する
fadeOut(...) 要素フェードアウトで非表示にする
fadeTo(...) 要素の透明度を指定した値に徐々に変更する
animate(...) 任意のCSSプロパティの値を徐々に変更する

 本連載では、セレクターの記述方法からイベントの処理、HTML/CSSやフォームの操作まで、さまざまjQueryの機能について解説してきました。次回からは実際のWeb制作でjQueryを活用する方法について、具体的なサンプルを作りながら紹介してきます。ご期待ください。


著者:西畑一馬(にしはた かずま)

to-R代表、Webクリエイター。PHPによるシステム開発や、CMSを利用したWebサイト制作、SEO対策などのマーケティング、コンサルティング、Webクリエイター向けの講座などを業務で行なっている。また、ブログto-RではJavaScriptやSEO対策、CSS、Movable TypeなどのWeb制作にかかわるさまざまな情報を発信している。
主な著書に「現場のプロから学ぶXHTML+CSS」(共著、毎日コミュニケーションズ刊)がある。

// h3").css({"font-size":"1.3em", "background-color":"#E6E6FA", "border-bottom":"1px solid #808080", "margin-bottom":"1.2em"}); $("#mainC > h4").css({"font-weight":"bold", "margin-bottom":"1.2em", "color":"#778899"}); }); //]]>

■関連記事