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

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

.delay( )アニメーションを一定期間待つ

構文

アニメーションを一定期間待つ返値:jQueryオブジェクト
jQo.delay( 期間 [,キューの名前])ver1.4〜

機能

jQueryオブジェクトで指定した要素のアニメーションを引数で指定した時間(ミリ秒)だけ待ちます。第2引数にキューの名前を指定することで特定のキューを操作できます。

delayメソッドによってアニメを待機している間にstopメソッドを実行すると、待機をキャンセルすることができます。 また、delayメソッドは引数のないshowメソッドhideメソッドに対して機能しません。

解説

サンプルアニメの説明

まずはdelayメソッドを利用していないサンプルを紹介します。
サンプル(delay/01.html)を開いてbodyの構成にdiv要素が1つあることを確認してください。jQueryは以下の様に記述され、div要素をクリックしたらdiv要素をフェードアウトし、その後でフェードインします。

jQueryではアニメはキューに登録され順々に実行されるので、以下の記述でフェードインとフェードアウトが同時に実行されることはありません。

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

結果として、div要素をクリックするとdiv要素がフェードアウトした後フェードインします。

一定期間待つ

delayメソッドを利用することで、以降のアニメの実行を一定期間待つことができます。
サンプル(delay/02.html)を開いてbody内の構成はdelay/01.htmlと同じ事を確認して下さい。jQueryもほとんど同じで、異なるのは以下の様にフェード処理の間にdelayメソッドが追加された点だけです。

$("div").click(function(){
	$("div").fadeOut();
	$("div").delay(3000);
	$("div").fadeIn();
});

結果として、div要素をクリックするとdiv要素がフェードアウトして消えますが、すぐにフェードインはせず、delayメソッドによって3秒(3000ミリ秒)後にフェードインが実行されます。

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

$("div").click(function(){
	$("div").fadeOut();
	$("div").delay("slow");
	$("div").fadeIn();
});

メモ

メソッドチェーンの利用

jQueryオブジェクトを返すメソッドは連結して記述できます。これをメソッドチェーンと呼び使い方でも紹介しています。→参考:使い方「メソッドチェーン」

ここまでのサンプルでは分かりやすいようにメソッドチェーンを利用しませんでしたが、メソッドチェーンを利用するとコードを短く記述でき、セレクタによる要素の抽出も少なくなるため高速化が望めます。

サンプル(delay/test01.html)を開いてbody内の構成がdelay/02.htmlと同じ事を確認してください。jQueryは以下の様にメソッドチェーンを利用して書き換えられています。

$("div").click(function(){
	$("div").fadeOut().delay(3000).fadeIn();
});

結果として、delay/02.htmlと全く同じように問題なく機能します。

引数のないhideメソッドやshowメソッドには利用できません

delayメソッドは引数のないhideメソッドやshowメソッドには利用できません。サンプル(delay/test02.html)を開いてbody内の構成がdelay/test01.htmlと同じ事を確認してください。jQueryは以下の様にfadeOutメソッドとfadeInメソッドが引数のないhideメソッドとshowメソッドに変更されています。

$("div").click(function(){
	$("div").hide().delay(3000).show();
});

結果として、div要素をクリックしても何も変化しません。

しかし引数に値が設定してあれば機能します。サンプル(delay/test02b.html)を開いて、以下の様にhideメソッドとshowメソッドの引数に値が設定されていることを確認して下さい。

$("div").click(function(){
	$("div").hide(300).delay(3000).show(300);
});

delay/test02b.htmlでは、div要素をクリックすると正常に機能するのが確認できます。

delayメソッドにstopメソッドを利用する

delayメソッドはアニメのメソッドではありませんが、アニメと同様にキューに追加され管理されています。そのためstopメソッドによってdelayメソッドによる待機をキャンセルすることができます。

サンプル(delay/test03.html)を開いてbody内にdiv要素とbutton要素があるのを確認してください。div要素をクリックした時の処理はdelay/test01.htmlと同じになっています。

button要素をクリックした時の処理は以下の様に引数無しのstopメソッドを実行するだけです。

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

このサンプルで、delayメソッドによって3秒待機している間にstopボタンをクリックすると、delayメソッドが停止し、すぐに次のアニメであるフェードインが実行されます。

ついでにstopメソッドの引数にtrueを設定し、以降のアニメをキューから外すサンプル(delay/test03b.html)も作成しました。このサンプルでdelayメソッドによって3秒待機している間にstopボタンをクリックすると、フェードインのアニメもキューから削除されるため表示されなくなります。

このようにdelayメソッドも他のアニメと同じように扱われていることが確認できます。

キューの名前について

第2引数のキューの名前ですが、そもそもキューに名前を付ける方法が分かりません。本家ページには説明もサンプルもないし...。もし分かったら、このページを更新しようと思います。