toggleメソッド

toggleメソッドは要素のスムーズな表示と非表示を切り替えます。要素が表示されている場合は非表示に、非表示の場合は表示されます。

構文

ミリ秒で指定した時間をかけて表示（デフォルトは400ms）：

javascript.toggle(継続時間);

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

javascript.toggle('slow' または 'fast');

displayパラメータでtrueまたはfalseの値を渡すことができます。trueの場合、要素は表示のみを行い、falseの場合は非表示のみを行います：

javascript.toggle(display);

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

javascript.toggle();

2番目のパラメータとしてイージング関数、3番目のパラメータとしてコールバック関数（アニメーション完了後に実行）を渡すこともできます。両パラメータはオプションです：

javascript.toggle(継続時間, [イージング関数], [コールバック関数]);

2番目のオプションパラメータとしてコールバック関数のみを渡すこともできます（アニメーション完了後に実行）：

javascript.toggle(継続時間, [コールバック関数]);

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

javascript.toggle(オプション);

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

javascript.toggle( {duration: 800, easing: easeInSine} );

例

ボタンクリック後に、toggleメソッドを使って非表示の段落をスムーズに表示してみましょう。キーワードslowを渡すことで、速度を600msに設定します。もう一度クリックすると非表示になります：

html<button>テキストを表示</button>
<p style="display: none">テキスト</p>

javascript$('button').click(function() {
  $('p').toggle('slow');
});

関連項目