jQuery.lay()関数の使用例を詳しく解説

lay() 関数は、queue 内の次の項目の実行を遅らせるために使用されます。

lay() は、キュー内で実行を待っている次のアニメーションの実行を指定した時間遅らせることができます。これは通常、キュー内の 2 つの jQuery エフェクト関数の間で、前のアニメーション効果の実行後に次のアニメーション効果の実行時間を遅らせるために使用されます。

次の項目がエフェクト アニメーションでない場合、その項目はエフェクト キューに追加されないため、関数はそれに対する遅延呼び出しを行いません。

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

構文

この関数はjQuery 1.4で追加されました。

jQueryObject.lay(duration [, queueName ] )

Parameters

パラメータの説明

duration Optional/String/Number型は遅延時間（ミリ秒数）を指定します。デフォルト値は400です。このパラメータには、string"fast"(=200) または "slow"(=600) を指定することもできます。

queueName オプション/文字列型で指定されるキュー名。デフォルトは「fx」で、jQueryの標準エフェクトキューを表します。

戻り値

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

例と説明

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

アニメーション効果:

<select id="animation">
        <option value="1">动画1</option>
        <option value="2">动画2</option>
        <option value="3">动画3</option>
        <option value="4">动画4</option>
    </select>
    <input id="exec" type="button" value="执行动画" >
</p>
<div id="myDiv" style="width:300px; height: 100px; background-color: #eee;">CodePlayer</div>

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

$("#exec").click( function(){
    var v = $("#animation").val();
    var $myDiv = $("#myDiv");
    if(v == "1"){
        $myDiv.slideUp( 1000 )
        .delay( "slow" )
        .fadeIn( 1500 );
    }else if(v == "2"){
        $myDiv.fadeOut( "slow" )
        .delay( 2000 )
        .slideDown( 1000 )
        .animate( { height: "+=300" } );
    }else if(v == "3"){
        /*
        注意：只有动画才会被加入效果队列中
        以下代码实际上只有slideUp()、slideDown()会加入效果队列
        delay()的延迟只对slideDown()起作用
        show()在被调用时就立即执行了(此时slideUp的动画效果尚未执行结束)
        以下代码的执行顺序时：
        1、slideUp()被加入队列、开始执行，
        2、show()也开始执行，它立即执行完毕，此时slideUp()的动画尚未执行结束
        3、延迟2秒
        4、执行SlideDown()
        */
        $myDiv.slideUp( "slow" )
        .delay( 2000 ) 
        .show( ) // 它不是一个效果动画
        .slideDown( );
    }else if(v == "4"){
        $myDiv.show()
        .delay( 2000 )
        // 在现有高度的基础上增加300px (如果原来是100px，增加后就是400px)
        .animate( { height: "+=300px" }, 2000 ) 
        .animate( { width: "50%" }, 1000 )      
        .animate( { width: "200px", height: "100px" }, 1000 );      
    }
} );

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