Explication détaillée des exemples d'utilisation de la fonction jQuery.delay()

La fonction

delay() est utilisée pour retarder l'exécution de l'élément suivant dans la file d'attente.

delay() peut retarder l'exécution de la prochaine animation en attente d'être exécutée dans la file d'attente pendant une durée spécifiée. Il est souvent utilisé entre deux fonctions d'effet jQuery dans la file d'attente pour retarder le temps d'exécution du prochain effet d'animation après l'exécution de l'effet d'animation précédent.

Si l'élément suivant n'est pas une animation d'effet, il ne sera pas ajouté à la file d'attente des effets, donc la fonction ne lui fera pas d'appel retardé.

Cette fonction appartient à l'objet (instance) jQuery.

Syntaxe

Cette fonction est ajoutée dans jQuery 1.4.

jQueryObject.delay( durée [, queueName ] )

Paramètre

Description du paramètre

durée Facultatif/Chaîne/Numéro Le type spécifie la durée du délai (en millisecondes). La valeur par défaut est 400. Ce paramètre peut également être une string"fast" (=200) ou "slow" (=600).

queueName Facultatif/Nom de la file d'attente spécifié par le type de chaîne. La valeur par défaut est "fx", qui représente la file d'attente d'effets standard jQuery.

Valeur de retour

delay()La valeur de retour de la fonction est de type jQuery et renvoie l'objet jQuery actuel lui-même.

Exemple et description

Veuillez vous référer au code HTML initial suivant :

e388a4556c0f65e1904146cc1a846bee Effet d'animation :

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

Ce qui suit est lié pour delay() exemple de code jQuery lié à la fonction pour démontrer l'utilisation spécifique de la fonction delay() :

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!