Explication détaillée de l'utilisation de la fonction jQuery.slideUp()

La fonction

slideUp() est utilisée pour masquer tous les éléments correspondants avec un effet de transition coulissante vers le haut animation .

L'effet d'animation de glissement vers le haut, c'est-à-dire que la hauteur de la zone visible de l'élément diminue progressivement de la hauteur d'origine à 0 (rétrécissant progressivement vers le haut).

Si l'élément lui-même est masqué, aucune modification n'y est apportée. Si l'élément est visible, cachez-le.

L'opposé de cette fonction est la fonction slideDown(), qui est utilisée pour afficher tous les éléments correspondants avec un effet d'animation de transition coulissante vers le bas.

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

Syntaxe

Cette fonction est nouvelle dans jQuery 1.0. La fonction slideUp() a principalement les deux formes d'utilisation suivantes :

Utilisation 1 : jQuery 1.4.3 prend désormais en charge l'assouplissement des paramètres.

jQueryObject.slideUp( [ durée ] [, assouplissement ] [, complet ] )

Utilisation deux :

jQueryObject.slideUp( options )

Utilisation La seconde est une variante d’utilisation. Spécifiez les paramètres d'option requis sous forme d'objet (vous pouvez spécifier plus de paramètres d'option que l'utilisation 1).

Paramètres

Description du paramètre

durée Le type Facultatif/Chaîne/Nombre spécifie la durée d'exécution de l'animation de transition (en millisecondes), la valeur par défaut est 400. Ce paramètre peut également être une string"fast" (=200) ou "slow" (=600).

Le type easing Facultatif/String spécifie l'effet d'animation à utiliser. La valeur par défaut est "swing". Il peut également être défini sur "linéaire" ou sur le nom de la fonction d'autres styles d'animation personnalisés.

L'élément de type facultatif/fonction complet doit être exécuté après l'affichage de la fonction. Ceci dans la fonction pointe vers l'élément DOM actuel.

options Classe d'objet spécifie l'objet du paramètre d'option.

L'objet options de paramètre peut identifier les attributs suivants (les attributs suivants sont facultatifs) :

Attribut Description de l'attribut

durée Voir paramètre durée.

easing Voir paramètre d'assouplissement.

complete Voir paramètre complete.

queue Le type booléen indique s'il faut mettre l'animation dans la file d'attente des effets , la valeur par défaut est vraie. À partir de la version 1.7, ce paramètre peut être une chaîne utilisée pour être placée dans la file d'attente des effets avec le nom spécifié. Si la file d'attente que vous spécifiez ne démarre pas automatiquement, vous devez appeler manuellement dequeue("queueName") pour démarrer la file d'attente.

De plus, jQuery 1.4 et 1.8 ont également ajouté de nombreuses nouvelles prises en charge des options de paramètres, mais ces paramètres ne sont pas couramment utilisés et ne seront pas décrits ici. Pour plus de détails, consultez la documentation officielle de jQuery.

Valeur de retour

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

Exemples et instructions

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

CodePlayer

Focus Partage sur la technologie de développement de programmation

L'effet caché du glissement vers le haut :

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

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

//【显示】按钮
$("#btnShow").click( function(){
    $("p").show( );
} );
//【隐藏】按钮
$("#btnSlideUp").click( function(){
    var v = $("#animation").val();
    if( v == "1" ){
        $("p").slideUp( );      
    }else if(v == "2"){
        $("p").slideUp( "slow" );   
    }else if(v == "3"){
        $("p").slideUp( 3000 ); 
    }else if(v == "4"){
        $("p").slideUp( 1000, function(){
            alert("隐藏完毕!");
        } );    
    }else if(v == "5"){
        $("p").slideUp( 1000, "linear" );   
    }else if(v == "6"){
        $("p").slideUp( { duration: 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!