jQuery.fadeIn()関数インスタンスの使用方法の詳細な説明

fadeIn() 関数は、フェードイン トランジション アニメーション 効果を使用して、一致するすべての要素を表示するために使用されます。

フェードイン アニメーション効果、つまり要素の不透明度が 0% から 100% まで徐々に増加します。

要素自体が表示されている場合、要素には変更は加えられません。要素が非表示になっている場合は、表示させます。

この関数の反対は fadeOut() 関数で、フェードアウト遷移アニメーション効果で一致する要素をすべて非表示にするために使用されます。

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

構文

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

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

jQueryObject.fadeIn( [duration] [, easing ] [, complete ] )

使用法 2:

jQueryObject.fadeIn( options )

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

パラメータ

パラメータの説明

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

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

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

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

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

属性 属性の説明

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

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

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

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

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

戻り値

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

例と説明

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

CodePlayer

プログラミング開発テクノロジーの共有に焦点を当てます

フェードイン表示効果:

<select id="animation">
    <option value="1">fadeIn( )</option>
    <option value="2">fadeIn( "slow" )</option>
    <option value="3">fadeIn( 3000 )</option>
    <option value="4">fadeIn( 2000, complete )</option>
    <option value="5">fadeIn( 1000, "linear" )</option>
    <option value="6">fadeIn( options )</option>
</select>
<input id="btnFadeIn" type="button" value="显示" > <input id="btnHide" type="button" value="隐藏" >

以下は、fadeIn() 関数の具体的な使用法を示す、fadeIn() 関数に関連する jQuery サンプル コードです:

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

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