jQuery.slideToggle()関数の使い方の詳しい説明

slideToggle() 関数は、スライド遷移アニメーション効果で一致するすべての要素を切り替えるために使用されます。

いわゆる「スイッチ」とは、要素が現在表示されている場合は非表示にし (上にスライドさせ)、要素が現在非表示になっている場合は表示させます (下にスライドさせます)。

この関数はjQueryオブジェクト(インスタンス)に属します。

構文

この関数は jQuery 1.0 の新しい関数です。 slideToggle() 関数には主に以下の 2 つの使用方法があります:

使用方法 1: jQuery 1.4.3 では新たにパラメーター イージングをサポートしました。

jQueryObject.slideToggle( [ period ] [, easing ] [, complete ] )

使用法 2:

jQueryObject.slideToggle( options )

使用法 2 は、使用法 1 のバリエーションです。必要なオプションパラメータをオブジェクト形式で指定します（使用方法 1 よりも多くのオプションパラメータを指定できます）。

パラメータ

パラメータの説明

duration Optional/String/Number タイプは、トランジション アニメーションの実行時間 (ミリ秒数) を指定します。デフォルト値は 400 です。このパラメータには、string"fast"(=200) または "slow"(=600) を指定することもできます。

easing オプション/文字列タイプは、使用するアニメーション効果を指定します。デフォルトは「スイング」ですが、「リニア」またはその他のカスタム アニメーション スタイル関数名に設定することもできます。

complete オプション/関数型要素は、関数が表示された後に実行する必要があります。関数内のこれは、現在の DOM 要素を指します。

オプションオブジェクトクラスタイプで指定されたオプションパラメータオブジェクト。

パラメータ オプション オブジェクトは、次の 属性 (以下の属性はオプションです) を認識できます:

属性 属性の説明

duration パラメータの期間を参照してください。

イージング パラメーターのイージングを参照してください。

complete 「パラメータの完了」を参照してください。

queue ブール型はアニメーションをエフェクトキューに入れるかどうかを示します。デフォルトは true です。バージョン 1.7 以降、このパラメータは、指定された名前でエフェクト キューに入れるために使用される文字列にすることができます。指定したキューが自動的に開始しない場合は、手動で dequeue("queueName") を呼び出してキューを開始する必要があります。

さらに、jQuery 1.4 および 1.8 では、パラメーター オプションの多くの新しいオプション サポートも追加されましたが、これらのパラメーターは一般的に使用されないため、ここでは説明しません。詳細については、jQuery の公式ドキュメントを参照してください。

戻り値

slideToggle()関数の戻り値はjQuery型で、現在のjQueryオブジェクトそのものを返します。

例と説明

次の初期HTMLコードを参照してください:

e388a4556c0f65e1904146cc1a846beeCodePlayer94b3e26ee717c64999d7867364b1b4a3

e388a4556c0f65e1904146cc1a846beeプログラミング開発技術の共有に焦点を当てます94b3e26ee717c64999d7867364b1b4a3

スライド切り替え効果：

3966846cdd030ebcb077381edce2b072

703e49eaede404d39352339c95412141slideToggle( )4afa15d3069109ac30911f04c56f3338

7bfdea07c9b5e145441728e641150443slideToggle( "slow" )< ;/option>

e7b5676beacd3b0a53f4ed158db0e503slideToggle( 3000 )4afa15d3069109ac30911f04c56f3338

ccbcb9736adf3fafd4a4c2c497760953slideToggle( 1000, complete )4afa15d3069109ac30911f04c56f3338 2ce8bb897015d8c94ea5b219b403d0ceslideToggle( 1000, "linear" )4afa15d3069109ac30911f04c56f3338

ed1a4eaf9baabdebbfb66c11d76987easlideToggle( options )4afa15d3069109ac30911f04c56f3338

8d6cf0f0198aa2c780d8b73ea3ef4916以下は、slideToggle() を説明するための slideToggle() 関数に関連する jQuery サンプル コードです。関数固有の使用法:

//【切换显示/隐藏】按钮
$("#btnSlideSwitch").click( function(){
    var v = $("#animation").val();
    if( v == "1" ){
        $("p").slideToggle( );      
    }else if(v == "2"){
        $("p").slideToggle( "slow" );   
    }else if(v == "3"){
        $("p").slideToggle( 3000 ); 
    }else if(v == "4"){
        $("p").slideToggle( 1000, function(){
            alert("切换完毕!");
        } );
    }else if(v == "5"){
        $("p").slideToggle( 1000, "linear" );   
    }else if(v == "6"){
        $("p").slideToggle( { duration: 1000 } );   
    }
} );

以上がjQuery.slideToggle()関数の使い方の詳しい説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。