Без кейворда

表示されている時は隠し、隠れている時は表示する返値：jQueryオブジェクト jQo.slideToggle( [期間] [,function] ) ver1.0〜 jQo.slideToggle( [期間] [,イージング] [,function] ) ver1.4.3〜 jQo.slideToggle( オプション ) 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オブジェクトで指定した要素が表示されている時は（slideUpの演出で）隠し、隠れている時は（slideDownの演出で）表示します。第1引数に期間を「ミリ秒」で設定することで、演出の速度を変更できます（期間を1000と設定すれば、1秒かけて要素を消します）。期間を設定しないと400ミリ秒で演出します。また、第2引数にfunctionを設定すると演出が完了した後に実行されます。

解説引数なしで利用する

slideToggleメソッドは引数なしで利用すると、400ミリ秒のアニメで演出します。隠れる時の演出は slideUpメソッドと同じで、表示される時の演出は slideDownメソッドと同じです。

サンプル（slideToggle/01.html）を開いてbody内にdiv要素とbutton要素があることを確認してください。jQueryは以下の様に記述され、buttonをクリックするとslideToggleメソッドを利用して400ミリ秒のアニメでdiv要素を表示したり隠したりします。 toggleメソッドと異なりアニメを省略することはできません。

$("button").click(function()< $("div").slideToggle(); >); $("div").hide(); $("button").click(function()< $("div").slideToggle(); >); 期間を設定してアニメの速度を変更する $("button").click(function()< $("div").slideToggle(1000); >); コールバックの設定 $("button").click(function()< $("div").slideToggle(1000, alertFunc); >); function alertFunc()< alert("Animation complete.") >; $("div").slideToggle(1000, function () ); イージングの設定

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

$("button").click(function()< $("div").slideToggle(1000, "linear"); >); オプション（objectオブジェクト）の設定 testObj = new Object(); testObj.duration = 3000; testObj.progress = function() $("button").click(function()< $("div").slideToggle(testObj); >); 関連項目

要素を隠したい場合は slideUpメソッドを利用します。隠れた要素を再び表示したい場合は slideDownメソッドを利用します。

メモ期間の設定について $("button").click(function()< $("div").slideToggle("slow"); >); 複数の対象にも対応しています click 表示した時と隠れた時で異なるコールバック（function）を実行したいのですが. function alertFunc()< var myHeight = $("div").css("height"); alert(myHeight); >; 引数にtrueやfalseを設定する $("button").click(function()< $("div").slideToggle(false); >);

📎📎📎📎📎📎📎📎📎📎