toggle( duration )

jQuery API の toggle( duration ) は、指定した要素が非表示の場合、その要素を、duration に指定した速度のアニメーションで表示し、指定した要素が表示されている場合、その要素を、duration に指定した速度のアニメーションで非表示にするメソッド。

記述方法

「セレクター」の要素が非表示の場合、「セレクター」の要素を、「速度」に指定した速度のアニメーションで表示する。

「セレクター」の要素が表示されている場合、「セレクター」の要素を、「速度」に指定した速度のアニメーションで非表示にする。

「速度」は、ミリ秒単位の数字、もしくは、'slow'、'normal'、'fast' の文字列で指定できる。

実装例（サンプル）①

toggle( duration )

toggle( duration ) ボタンをクリックすると:

２秒間のアニメーションで表示／非表示切替

実装例（サンプル）①の動作について

1. 「 toggle( duration ) 」ボタンをクリックすると、「toggle( duration ) ボタンをクリックすると: 」の下側に、「２秒間のアニメーションで表示／非表示切替」という赤色のテキストを、２秒間のアニメーションで表示する。
2. 「 toggle( duration ) 」ボタンを再度クリックすると、「toggle( duration ) ボタンをクリックすると: 」の下側の「２秒間のアニメーションで表示／非表示切替」という赤色のテキストを、２秒間のアニメーションで非表示にする。

実装例（サンプル）①のソースコード

JavaScript

CSS

HTML

実装例（サンプル）②

toggle( duration )

toggle( duration ) ボタンをクリックすると:

２秒間のアニメーションで表示切替Ⅰ

２秒間のアニメーションで表示切替Ⅱ

実装例（サンプル）②の動作について

1. 「 toggle( duration ) 」ボタンをクリックすると、「toggle( duration ) ボタンをクリックすると: 」の下側の「２秒間のアニメーションで表示切替Ⅰ」という赤色のテキストを、「２秒間のアニメーションで表示切替Ⅱ」という青色のテキストに切り替える。
2. 「 toggle( duration ) 」ボタンを再度クリックすると、「toggle( duration ) ボタンをクリックすると: 」の下側の「２秒間のアニメーションで表示切替Ⅰ」という赤色のテキストを、「２秒間のアニメーションで表示切替Ⅱ」という青色のテキストに切り替える。

実装例（サンプル）②のソースコード

JavaScript

CSS

HTML