Ausführliche Erläuterung der Anwendungsbeispiele für die Funktion jQuery.delay()

Die Funktion

delay() wird verwendet, um die Ausführung des nächsten Elements in der Warteschlange zu verzögern.

delay() kann die Ausführung der nächsten Animation, die in der Warteschlange auf ihre Ausführung wartet, für eine bestimmte Zeit verzögern. Es wird üblicherweise zwischen zwei jQuery-Effektfunktionen in der Warteschlange verwendet, um die Ausführungszeit des nächsten Animationseffekts nach der Ausführung des vorherigen Animationseffekts zu verzögern.

Wenn das nächste Element keine Effektanimation ist, wird es nicht zur Effektwarteschlange hinzugefügt, sodass die Funktion keinen verzögerten Aufruf daran durchführt.

Diese Funktion gehört zum jQuery-Objekt (Instanz).

Syntax

Diese Funktion wurde in jQuery 1.4 hinzugefügt.

jQueryObject.delay( duration [, queueName ] )

Parameter

Parameterbeschreibung

duration Optional/String/Number The Typ gibt an, wie lange verzögert werden soll (in Millisekunden). Der Standardwert ist 400. Dieser Parameter kann auch string„schnell“ (=200) oder „langsam“ (=600) sein.

queueName Optional/Warteschlangenname, angegeben durch String-Typ. Der Standardwert ist „fx“, was die jQuery-Standardeffektwarteschlange darstellt.

Rückgabewert

delay()Der Rückgabewert der Funktion ist vom jQuery-Typ und gibt das aktuelle jQuery-Objekt selbst zurück.

Beispiel und Beschreibung

Bitte beziehen Sie sich auf den folgenden anfänglichen HTML-Code:

e388a4556c0f65e1904146cc1a846bee Animationseffekt:

<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>

Das Folgende ist verwandt jQuery-Beispielcode für die Funktion „delay()“, um die spezifische Verwendung der Funktion „delay()“ zu demonstrieren:

$("#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 );      
    }
} );

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Anwendungsbeispiele für die Funktion jQuery.delay(). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!