toggle( duration, callback )

jQuery API の toggle( duration, callback ) は、指定した要素の表示・非表示を、duration に指定した速度のアニメーションで切り替え、その後、callback に指定した関数を実行するメソッド。

記述方法

jQuery( セレクター ) . toggle( 速度, コールバック関数 );

「セレクター」の要素が非表示の場合、「セレクター」の要素を、「速度」に指定した速度のアニメーションで表示し、その後、「コールバック関数」に指定した関数を実行する。

「セレクター」の要素が表示されている場合、「セレクター」の要素を、「速度」に指定した速度のアニメーションで非表示にし、その後、「コールバック関数」に指定した関数を実行する。

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

実装例(サンプル)

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

黄色のボックスを表示しました。

実装例(サンプル)の動作について

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

実装例(サンプル)のソースコード

JavaScript

<script>
<!--
jQuery( function() {
    jQuery( '#jquery-api-toggle' ) . click( function() {
        jQuery( '#jquery-api-toggle-contents' ) . toggle(
            2000,
            function() {
                jQuery( '#jquery-api-toggle-contents-2' ) . toggle( 1000 );
            }
        );
    } );
} );
// -->
</script>

CSS

<style>
<!--
#jquery-api-toggle-contents {
    display: none;
    width: 250px;
    height: 250px;
    text-align: center;
    background-color: yellow;
    border: 1px solid gray;
    border-radius: 10px;
}
#jquery-api-toggle-contents-2 {
    display: none;
    color: red;
}
-->
</style>

HTML

<p><button id="jquery-api-toggle">toggle( duration, callback )</button></p>
<p>toggle( duration, callback ) ボタンをクリックすると:</p>
<p id="jquery-api-toggle-contents-2">黄色のボックスを表示しました。</p>
<div id="jquery-api-toggle-contents"></div>

スポンサード リンク

カテゴリー: API, JavaScript, jQuery, エフェクト, 基本 タグ: パーマリンク