デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
1章:jQuery入門
2章:jQuery基礎
3章:jQuery発展
番外編:研究

簡単な演出

概要

簡単な演出を紹介します

jQueryでは、よく利用する演出(フェードやメニューの開閉)を簡単に実現できます。ここでは簡単に利用できる演出系のメソッドを紹介します。

解説

表示/非表示

まずは一番シンプルな表示/非表示を切り替えるメソッドを紹介します。サンプル(effect/01.html)を開いてbuttonをクリックする毎にdiv要素が消えたり表示されたりすることを確認して下さい。jQueryは以下の様に記述され、buttonをクリックするとtoggleメソッドを利用してdiv要素の表示/非表示を切り替えています。
toggleメソッドはtoggleイベントと異なり廃止されていません。

$("button").click(function(){
	$("div").toggle();
});

toggleメソッドは対象が表示されている時は消して、消えている時は表示します。状態の管理をしなくても良いため、初心者にも利用しやすいメソッドです。

ちなみに表示だけの場合はshowメソッド、消すだけの場合はhideメソッドがあります。toggleメソッドも含め、これらのメソッドは引数に数値を指定することでアニメの演出が付くのですが、少々クドイ演出のため利用することは少ないでしょう。詳しいことは各リファレンスの内容を確認してください。

フェードイン/フェードアウト

jQueryでは要素を徐々に表示(フェードイン)したり、徐々に消す(フェードアウト)ことも簡単にできます。サンプル(effect/02.html)を開いてbuttonをクリックする毎にdiv要素がフェードアウト/フェードインを繰り返すことを確認して下さい。jQueryは以下の様に記述され、buttonをクリックするとfadeToggleメソッドを利用してdiv要素をフェードアウトさせたりフェードインさせています。

$("button").click(function(){
	$("div").fadeToggle();
});

fadeToggleメソッドは対象が表示されている時はフェードアウトして、消えている時はフェードインします。状態の管理をしなくても良いため、初心者にも利用しやすいメソッドです。

fadeToggleメソッドは引数に数値(ミリ秒)を指定することで、演出の時間を変更することができます。サンプル(effect/02b.html)では引数に3000を設定しているため、3000ミリ秒(つまり3秒)かけてフェードします。他にも色々引数が指定できるのですが、詳しくはリファレンスを確認して下さい。

$("button").click(function(){
	$("div").fadeToggle(3000);
});

またフェードインだけの場合はfadeInメソッド、フェードアウトだけの場合はfadeOutメソッドがあります。

フェードの注意点

パソコンにとってグラフィックの描画は非常に負荷が掛かります(そのため大抵のPCではグラフィックを専門に処理するGPUを搭載しています)。その中でも透明度の処理は重く、これを軽減するためにプログラマーは様々な工夫をしなければなりません。実際jQueryでも透明となり、見えない要素は表示しないようにしています(たぶんdisplay:noneを利用)。

そのためフェードアウト後にレイアウトが崩れる場合があります。サンプル(effect/03.html)を開いて、ボタンに見立てたdiv要素(id属性fadeButton)がフェード対象のdiv要素(id属性fadeTarget)の下に配置されているのを確認してください。

<div id="fadeTarget"></div>
<div id="fadeButton">click me!</div>

buttonに見立てた青いdiv要素をクリックするとオレンジ色のdiv要素がフェードアウトしますが、フェードが完了するオレンジ色のdiv要素は消されてしまうため、ボタンが上に移動してレイアウトが崩れてしまいます。

ですのでコンテンツ制作でフェードアウトを予定している場合はサンプル(effect/03b.html)のように、あらかじめ固定したdiv要素などで保護する必要があります。このサンプルではサイズが固定されたdiv要素(id属性fixedBox)によってフェードするdiv要素を囲み、レイアウトが変化しないようにしています。

<div id="fixedBox">
	<div id="fadeTarget"></div>
</div>
<div id="fadeButton">click me!</div>

結果としてeffect/03b.htmlではオレンジ色のdiv要素が消えてもレイアウトが崩れません。

スライドアップ/スライドダウン

耳慣れない演出名ですが、これは開閉メニューなどに利用できます。サンプル(effect/04.html)を開いて「click me.」と書かれた青いdiv要素をクリックしてください。クリックする毎に下のdiv要素が閉じたり(スライドアップ)開いたり(スライドダウン)します。

jQueryは以下の様に記述され、青いdiv要素(class属性clickArea)をクリックするとslideToggleメソッドを利用してdiv要素(class属性textArea)を開閉します。

$(".clickArea").click(function (){
	$(".textArea").slideToggle();
});

slideToggleメソッドは対象が表示されている時はスライドアップして消し、消えている時はスライドダウンして表示します。状態の管理をしなくても良いため、初心者にも利用しやすいメソッドです。

slideToggleメソッドは引数に数値(ミリ秒)を指定することで、演出の時間を変更することができます。サンプル(effect/04b.html)では引数に3000を設定しているため、3000ミリ秒(つまり3秒)かけてスライドします。他にも色々引数が指定できるのですが、詳しくはリファレンスを確認して下さい。

$(".clickArea").click(function (){
	$(".textArea").slideToggle(3000);
});

またスライドアップだけの場合はslideUpメソッド、スライドダウンだけの場合はslideDownメソッドがあります。前回のthisから離れて演出について説明しましたが、次回では再びthisをテーマにした課題に入ります(次回slideToggleメソッドを利用したサンプルが必要だったので、今回の説明を先にしておいたのです)。