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

このエントリーをはてなブックマークに追加
索引
Core:コアとなる仕組み
Selectors:セレクタ
Attributes:属性
Traversing:対象の変更
Manipulation:操作
CSS:スタイルシート
Events:イベント
Effects:演出効果
Ajax:xml等との連携
Utilities:ユーティリティ
Data:データ
Miscellaneous:諸々
Deferred:処理管理
Callbacks:コールバック
Internals:内部処理

.show( )隠れた要素を表示

構文

隠れた要素を表示返値:jQueryオブジェクト
jQo.show( )ver1.0〜
jQo.show( 期間 [,function] )ver1.0〜
jQo.show( 期間 [,イージング] [,function] )ver1.4.3〜
jQo.show( オプション )ver1.0〜
上記構文のオプションはobjectオブジェクトで指定します。利用できるプロパティは以下の通りです。
・duration:目的の値までの期間をミリ秒で指定
・easing:アニメの加速度のタイプを指定
・queue:アニメをキューに追加するか以下かを指定
・step:アニメの期間に連続して実行するfunctionを指定
・complete:アニメの完了時に実行するfunctionを指定
・specialEasing:プロパティ(幅や高さなど)毎に個別のイージングを設定します。v1.4〜
以下はv1.8で追加されたDeferredに合わせて追加されました(functionの引数にpromiseオブジェクトがある)
・start:アニメが開始された時に実行するfunctionを指定
・progress:アニメの期間に連続して実行するfunctionを指定
・done:アニメが正常終了した時に実行するfunctionを指定
・fail:アニメが異常終了した時(stopされた時)に実行するfunctionを指定
・always:アニメの終了した時(正常/異常にかかわらず)に実行するfunctionを指定

機能

jQueryオブジェクトで指定した隠れている要素を表示します。第1引数に期間を「ミリ秒」で設定することで、演出の速度を変更できます(期間を1000と設定すれば、1秒かけて要素を消します)。期間を設定しないとアニメ無しで要素を表示します。また、第2引数にfunctionを設定すると演出が完了した後に実行されます。

v1.4.3からは期間とfunctionの間にイージングを設定して、アニメの加速度を変更できます。

showメソッドはhideメソッドなどによって隠された要素を表示します。ですので、先にhideメソッドを理解するようにして下さい。hideメソッドに限定されているわけでなく、他のメソッド(fadeOutメソッド)などによって隠されている要素にも利用できます(ページ後半のメモに説明あり)。

解説

引数なしで利用する

showメソッドは引数なしで利用すると、アニメの演出なしに要素を表示します。サンプル(show/01.html)を開いてbody内にdiv要素とbutton要素があることを確認してください。しかしページ上にdiv要素が表示されません。これは以下のようにhideメソッドによって、あらかじめdiv要素が隠されているためです。

$("div").hide();

以下の部分では、buttonをクリックするとshowメソッドを利用して、hideメソッドで隠されたdiv要素を表示するようにしています。

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

結果として、buttonをクリックすると、div要素がアニメの演出なしに表示されます。

期間を設定し、アニメの演出で隠す

引数に期間(ミリ秒)を設定すると、指定された時間でアニメをしながら要素を隠します。hideメソッドのアニメ演出は「拡大しながらフェードイン」となっています。ちょっと過剰演出気味なので、あまり使いどころはないと思います。

サンプル(show/02.html)を開いてbodyの構成がshow/01.htmlと同じ事を確認して下さい。jQueryもほとんど同じで、異なるのは以下の様にshowメソッドの引数に期間「1000」が設定されている点だけです。

$("div").click(function(){
	$("div").show(1000);
});

結果として、buttonをクリックすると1秒(1000ミリ秒)かけてdiv要素が拡大しながらフェードインして表示されます。

コールバックの設定

第2引数にfunctionを設定することで、隠した後にfunctionを実行することができます。
サンプル(show/03.html)を開いてbody内の構成がshow/02.htmlと同じ事を確認してください。jQueryは少し変更されています。まずはshowメソッドを確認して下さい。以下の様に第2引数にfunction「hideFunc」が設定されています。

$("button").click(function(){
	$("div").show(1000, hideFunc);
});

そしてhideFuncは、以下の様にhideメソッドを利用して、再び要素を隠します。

function hideFunc(){
	$("div").hide(1000);
};

結果として、buttonをクリックすると1秒(1000ミリ秒)かけてdiv要素が拡大しながらフェードインします。その後で再びhideメソッドによって隠されます。

functionは無名関数を利用して、直接設定することができます。→サンプル(show/03b.html

$("div").show(1000, function (){
	$("div").hide(1000);
});

イージングの設定

v1.4.3からはshowメソッドの第2引数にイージングの設定ができるようになりました。jQueryが利用できるイージングは「swing」と「linear」の2種類しかありません。デフォルトは「swing」です。イージングの種類はプラグインを追加することで増やすことができます。→プラグイン「イージングの追加

サンプル(show/04.html)を開いてbody内の構成がshow/02.htmlと同じ事を確認してください。jQueryもほとんどshow/02.htmlと同じで、異なるのは以下の様に第2引数にイージング「linear」が追加された点だけです。

$("button").click(function(){
	$("div").show(1000, "linear");
});

結果として、buttonをクリックすると「等速」でアニメが再生されます。違いが分かりにくいので、イージングの「swing」と「linear」を比較できるサンプルを作成しました。

サンプル(show/04b.html)ではbutton要素をクリックすると、id属性がswingと設定された方は「swing」のイージング、id属性がlinearと設定された方は「linear」のイージングで演出されます。あまり違いは分からないかもしれませんが、linearは等速で演出し、swingは徐々に加速後、徐々に減速します。

オプション(objectオブジェクト)の設定

引数にobjectオブジェクトを設定することで様々な処理が可能になります。利用できるプロパティはanimate(prop,option)メソッドと同じなので、詳細はそちらを参照してください。

ここではdurationプロパティとstepプロパティを利用したサンプルを紹介します。サンプル(show/05.html)を開いてbody内の構成は変更がないことを確認してください。jQueryでは、まず以下の部分を確認してください。

testObj = new Object();
testObj.duration = 3000;
testObj.progress = function(){
	var myHeight = $("div").height();
	$("div").text(myHeight)	
}

1行目でobjectオブジェクトを作成し、2行目でdurationプロパティを設定しています。ここでは3000(ミリ秒)を設定しているので3秒かけて演出します。そして3〜6行目ではprogressプロパティを設定しています。このプロパティにfunctionを代入しておくと演出をしている間に実行したい処理を設定できます。このサンプルではdiv要素の高さを取得し、それをdiv要素内に表示しています。

そして作成したobjectオブジェクトは以下の様にshowメソッドの引数として設定します。

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

結果として、buttonをクリックすると3秒かけてdiv要素が表示されていきますが、progressプロパティに設定した処理によりdiv要素内に刻々とdiv要素の高さが表示されます。

関連項目

要素を隠したい場合はhideメソッドを利用します。
また、toggleメソッドを利用すると、要素が表示されている時は隠し、隠れている時は表示します。

メモ

期間の設定について

第1引数の期間を設定するところでは「slow」「fast」といったキーワードも利用することができます(fastは200ミリ秒、slowは600ミリ秒)。サンプル(show/test01.html)では以下の様に引数に「slow」を設定しています(文字列なのでクォートを忘れずに)。

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

結果として、buttonをクリックすると「ゆっくりめ」に表示されます。

複数の対象にも対応しています

セレクタに一致する要素が複数あっても、showメソッドでまとめ表示することができます。
サンプル(show/test02.html)を開いてjQueryがshow/02.htmlと同じ事を確認して下さい。body内の構成は変更され、div要素が3つに増えています。

<body>
	<button>click</button>
	<div></div>
	<div></div>
	<div></div>
</body>

結果として、buttonをクリックすると全てのdiv要素が現れます。

hideメソッド以外にも利用できます

showメソッドはhideメソッド以外の処理で消えている要素にも利用できます。
サンプル(show/test03.html)を開いて、ほとんどshow/01.htmlと同じ事を確認してください。異なるのは以下の様にhideメソッドではなくfadeOutメソッドを利用して要素を消している点だけです。

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

実際にbuttonをクリックしてdiv要素を表示し、fadeOutメソッドで消えている要素にも利用できることを確認してください。

さらにjQueryのメソッド以外の理由で消えている要素にも利用できます。サンプル(show/test03b.html)を開いて、jQueryでdiv要素を消していないことを確認してください(fadeOutメソッドが削除されています)。

jQueryでdiv要素を消していないのに、div要素が表示されないのはcssで以下の様にdisplay属性がnoneに設定されているためです。

div{
	display:none;
	width:100px;
	height:100px;
	color:#fff;
	background-color:#09C;
}

このサンプルでもbuttonをクリックすればdiv要素を表示することができます。