[,キューの名前])ver1.4〜機能jQueryオブジェクトで指定した要素のアニメーションを引数で指定した時間(ミリ秒)だけ待ちます。第2引数にキューの名前を指定することで特定のキューを操作できます。stopメソッドを実行すると、待機をキャンセルすることができます。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メソッドを実行するだけです。(){$("div").stop();});このサンプルで、delayメソッドによって3秒待機している間にstopボタンをクリックすると、delayメソッドが停止し、すぐに次のアニメであるフェードインが実行されます。ついでにstopメソッドの引数にtrueを設定し、以降のアニメをキューから外すサンプル(delay/test03b.html)も作成しました。このサンプルでdelayメソッドによって3秒待機している間にstopボタンをクリックすると、フェードインのアニメもキューから削除されるため表示されなくなります。このようにdelayメソッドも他のアニメと同じように扱われていることが確認できます。キューの名前について第2引数のキューの名前ですが、そもそもキューに名前を付ける方法が分かりません。本家ページには説明もサンプルもないし...。分かったら、このページを更新しようと思います。