slideToggleメソッド

slideToggleメソッドは、非表示の要素をスムーズに表示し、 表示されている要素を非表示にします。

構文

指定した時間（デフォルトは400ms）で表示/非表示を切り替えます：

javascript.slideToggle(継続時間);

時間はミリ秒だけでなく、キーワードslow（600ms） とfast（200ms）でも指定できます。値が大きいほど、 アニメーションは遅くなります：

javascript.slideToggle('slow' or 'fast');

パラメータを指定しない場合、アニメーションは実行されず、 要素は瞬時に表示/非表示が切り替わります：

javascript.slideToggle();

2番目のパラメータとしてイージング関数を、 3番目のパラメータとしてアニメーション完了後に実行される callback関数を渡すこともできます。両方のパラメータはオプションです：

javascript.slideToggle(継続時間, [イージング関数], [callback関数]);

JavaScriptオブジェクト（キー: 値のペアを含む）の形式で、 様々なオプションをメソッドに渡すことができます：

javascript.slideToggle(options);

このようなオブジェクトは、次のパラメータや関数を渡すことができます - duration、easing、queue、specialEasing、 step、progress、complete、start、 done、fail、always。これらのパラメータの説明は、 animateメソッドで 確認できます。例えば、継続時間とイージング関数を設定します：

javascript.slideToggle( {duration: 600, easing: easeInSine} );

例

ボタンをクリックした後、 slideToggleメソッドを使用して段落を含む親divを スムーズに非表示にしましょう（このdivは parentメソッドで 見つけます）。ボタンを再度クリックすると、divが 再びスムーズに表示されます。キーワードslowを渡すことで、 速度を600msに設定します：

html<button>toggle text</button>
<div>
  <p id='test'>text text text text text text text</p>
  <p>text text text text text text text</p>
  <p>text text text text text text text</p>
</div>

javascript$('button').click(function() {
  $('#test').parent().slideToggle('slow');
});

関連項目