)ver1.0〜上記構文のオプションはobjectオブジェクトで指定します。利用できるプロパティは以下の通りです。・specialEasing:プロパティ(幅や高さなど)毎に個別のイージングを設定します。機能jQueryオブジェクトで指定した要素が表示されている時は(hideメソッドの演出で)隠し、隠れている時は(showメソッドの演出で)表示します。第1引数に期間を「ミリ秒」で設定することで、演出の速度を変更できます(期間を1000と設定すれば、1秒かけて要素を消します)。期間を設定しないとアニメ無しで演出します。第2引数にfunctionを設定すると演出が完了した後に実行されます。1つの処理で「表示/隠す」処理ができるため初心者にとって非常に便利なメソッドなのですが、演出が「拡大/縮小+フェード」と少々過剰なため、意外と利用機会はありません。slideToggleメソッドのほうが良いかもしれません。v1.3からは引数にtrue/falseを設定し、showメソッドかhideメソッドの機能に固定することができます。v1.4.3からは期間とfunctionの間にイージングを設定して、アニメの加速度を変更できます。引数なしで利用するtoggleメソッドは引数なしで利用すると、アニメの演出なしに演出します。サンプル(toggle/01.html)を開いてbody内にdiv要素とbutton要素があることを確認してください。jQueryは以下の様に記述され、buttonをクリックするとtoggleメソッドを利用してアニメの演出なしにdiv要素を表示したり隠したりします。$("button").click(function(){$("div").toggle();});結果として、buttonクリックする度にdiv要素が消えたり表示されます。期間を設定してアニメの演出にする引数に期間(ミリ秒)を設定すると、指定された時間でアニメをしながら演出します。showメソッドと同じです。過剰演出気味なので、あまり使いどころはないと思います。サンプル(toggle/02.html)を開いてbodyの構成がtoggle/01.htmlと同じ事を確認して下さい。jQueryもほとんど同じで、異なるのは以下の様にtoggleメソッドの引数に期間「1000」が設定されている点だけです。$("button").click(function(){$("div").toggle(1000);});結果として、buttonクリックする度に1秒(1000ミリ秒)かけてdiv要素が縮小しながらフェードアウしたり、拡大しながらフェードインします。第2引数にfunctionを設定することで、演出の後にfunctionを実行することができます。サンプル(toggle/03.html)を開いてbody内の構成がtoggle/02.htmlと同じ事を確認してください。jQueryは少し変更されています。toggleメソッドを確認して下さい。以下の様に第2引数にfunction「alertFunc」が設定されています。complete.」と表示するだけです。complete.」とアラートが表示されます。「表示/隠す」で個別のfunctionを設定することはできません。functionは無名関数を利用して、直接設定することができます。complete.")});演出の固定v1.3から引数にtrueを設定することで「表示」、falseを設定することで「隠す」と機能を固定することができます。サンプルサンプル(toggle/04.html)を開いてbody内にdiv要素が1つと、2つのbutton要素があることを確認して下さい。button要素にはそれぞれ「show」と「hide」と個別のid属性が設定されています。id="hide">hide</button><div></div>jQueryは以下の様に記述され、id属性が「show」のbuttonがクリックされた時は、引数にtrueを設定したtoggleメソッドが実行されます。id属性が「hide」のbuttonがクリックされた時は、引数にfalseを設定したtoggleメソッドが実行されます。$("button#show").click(function(){$("div").toggle(true);});$("button#hide").click(function(){$("div").toggle(false);});結果として、hideのbuttonをクリックしたらdiv要素が隠れ、showのbuttonをクリックしたらdiv要素が表示されます。フラグや条件式によって処理を変更する時に利用する構文なのだと思います。イージングの設定v1.4.3からはtoggleメソッドの第2引数にイージングの設定ができるようになりました。jQueryが利用できるイージングは「swing」と「linear」の2種類しかありません。デフォルトは「swing」です。イージングの種類はプラグインを追加することで増やすことができます。→プラグイン「イージングの追加」サンプル(toggle/05.html)を開いてbody内の構成がtoggle/02.htmlと同じ事を確認してください。jQueryもほとんどtoggle/02.htmlと同じで、異なるのは以下の様に第2引数にイージング「linear」が追加された点だけです。"linear");});結果として、div要素をクリックすると「等速」でアニメが再生されます。違いが分かりにくいので、イージングの「swing」と「linear」を比較できるサンプルを作成しました。サンプル(toggle/05b.html)ではbutton要素をクリックすると、id属性がswingと設定された方は「swing」のイージング、id属性がlinearと設定された方は「linear」のイージングで演出されます。違いは分からないかもしれませんが、linearは等速で演出し、swingは徐々に加速後、徐々に減速します。引数にobjectオブジェクトを設定することで様々な処理が可能になります。animate(prop,option)メソッドと同じなので、詳細はそちらを参照してください。ここではdurationプロパティとstepプロパティを利用したサンプルを紹介します。サンプル(toggle/06.html)を開いてbody内の構成はtoggle/01.htmlと同じことを確認してください。jQueryでは、まず以下の部分を確認してください。$("div").height();$("div").text(myHeight)}1行目でobjectオブジェクトを作成し、2行目でdurationプロパティを設定しています。ここでは3000(ミリ秒)を設定しているので3秒かけて演出します。3〜6行目ではprogressプロパティを設定しています。このプロパティにfunctionを代入しておくと演出をしている間に実行したい処理を設定できます。このサンプルではdiv要素の高さを取得し、それをdiv要素内に表示しています。作成したobjectオブジェクトは以下の様にtoggleメソッドの引数として設定します。$("button").click(function(){$("div").toggle(testObj);});結果として、buttonをクリックすると3秒かけてdiv要素が消えていきますが、progressプロパティに設定した処理によりdiv要素内に刻々とdiv要素の高さが表示されます。buttonをクリックして表示する場合にもdiv要素に高さが表示されます。hideメソッドを利用します。showメソッドを利用します。toggleイベントがあります。構文が違うので混同することはないと思いますが、確認して機能の違いを覚えておきましょう。メモ期間の設定について第1引数の期間を設定するところでは「slow」「fast」といったキーワードも利用することができます(fastは200ミリ秒、slowは600ミリ秒)。サンプル(toggle/test01.html)では以下の様に引数に「slow」を設定しています(文字列なのでクォートを忘れずに)。$("button").click(function(){$("div").toggle("slow");});結果として、buttonをクリックすると「ゆっくりめ」にアニメします。複数の対象にも対応していますセレクタに一致する要素が複数あっても、toggleメソッドでまとめて隠すことができます。サンプル(toggle/test02.html)を開いてjQueryがtoggle/02.htmlと同じ事を確認して下さい。body内の構成は変更され、div要素が3つに増えています。<body><button>click</button><div></div><div></div><div></div></body>結果として、buttonをクリックすると全てのdiv要素が表示されたり隠れます。表示した時と隠れた時で異なるコールバック(function)を実行したいのですが...表示した時と隠れた時で異なるfunctionを実行したいのですが、そのような構文はありません。function内で判断するしかないと思うのですが、そこでも予想外の事態になっています。サンプル(toggle/test03.html)を開いてbody内の構成がtoggle/03.htmlと同じ事を確認して下さい。jQUeryもほとんど同じなのですが、以下の様にコールバックに設定したalertFuncを以下の様に変更しています。cssメソッドを利用してdiv要素の幅を取得している部分です。これで隠れた後では「0px」と表示されると思ったのですが、そうはなりませんでした...。この方法がダメだとすると、どのように判断したらよいのでしょう?。フラグを設定するのもtoggleメソッドの使い勝手を損なう気がしますし...。