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

La fonction slideToggle() est utilisée pour changer tous les éléments correspondants avec un effet d'animation de transition coulissante.

Le soi-disant « commutateur » signifie que si l'élément est actuellement visible, cachez-le (faites glisser vers le haut) ; si l'élément est actuellement masqué, faites-le apparaître (faites glisser vers le bas).

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

Syntaxe

Cette fonction est nouvelle dans jQuery 1.0. La fonction slideToggle() 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.slideToggle( [ durée ] [, assouplissement ] [, complet ] )

Utilisation deux :

jQueryObject.slideToggle( 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ètre

Description du paramètre

durée Facultatif/String/Number type spécifie la durée d'exécution de l'animation de transition (nombre de 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 reconnaître 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

slideToggle()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 :

e388a4556c0f65e1904146cc1a846beeCodePlayer94b3e26ee717c64999d7867364b1b4a3

e388a4556c0f65e1904146cc1a846beeFocus Partage sur la technologie de développement de programmation94b3e26ee717c64999d7867364b1b4a3

Effet de commutation coulissant :

3966846cdd030ebcb077381edce2b072

7b7725f2e08f97318ab4eed9ba233cb3

7bfdea07c9b5e145441728e641150443slideToggle( "lent" )4afa15d3069109ac30911f04c56f3338

5ba26a0db61dcce24faad144348b08a4slideToggle( 3000 )4afa15d3069109ac30911f04c56f3338

ccbcb9736adf3fafd4a4c2c497760953slideToggle( 1000, complet)4afa15d3069109ac30911f04c56f3338

aaa1a70849e9a1e83a36c9ca5549358dslideToggle( 1000, "linéaire" )4afa15d3069109ac30911f04c56f3338

ed1a4eaf9baabdebbfb66c11d76987easlideToggle( options )4afa15d3069109ac30911f04c56f3338

b38bcc2238ab4d1406940bf887819d23

196b4103498b208b3241597b42cadf07

Ce qui suit est le même comme exemple de code jQuery lié à la fonction slideToggle() pour démontrer l'utilisation spécifique de la fonction slideToggle() :

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