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

La fonction

toggle() est utilisée pour basculer tous les éléments correspondants. De plus, vous pouvez également spécifier des effets d'animation de transition pour le changement d'élément.

Le soi-disant « commutateur » signifie que si l'élément est actuellement visible, masquez-le ; si l'élément est actuellement masqué, faites-le afficher (visible).

La fonction toggle() introduite ici est utilisée pour changer l'affichage/masquage des éléments. jQuery possède également une fonction d'événement toggle() du même nom, qui est utilisée pour lier l'événement de clic et basculer pour exécuter différentes fonctions de traitement d'événement à tour de rôle lorsqu'elles sont déclenchées.

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

Syntaxe

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

Utilisation 2 :

jQueryObject.toggle( 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).

Utilisation 3 : jQuery 1.3 prend désormais en charge cette utilisation.

jQueryObject.toggle( showOrHide )

Spécifie s'il faut afficher ou masquer l'élément via la valeur booléenne showOrHide.

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.

complete La fonction qui doit être exécutée après l'affichage de l'élément optionnel/Type de 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.

Le type booléen showOrHide spécifie une valeur booléenne pour afficher/masquer les éléments. Si vrai, l'élément est affiché, sinon il est masqué.

Si aucun paramètre n'est spécifié pour toggle(), le moyen le plus rapide sera d'afficher/masquer l'élément directement sans utiliser d'effets d'animation.

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

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

<p>CodePlayer</p>
<p>专注于编程开发技术分享</p>

Effet bascule :

<select id="animation">
    <option value="1">toggle( )</option>
    <option value="2">toggle( "slow" )</option>
    <option value="3">toggle( 3000 )</option>
    <option value="4">toggle( 1000, complete )</option>
    <option value="5">toggle( 1000, "linear" )</option>
    <option value="6">toggle( options )</option>
    <option value="7">toggle( true )</option>
    <option value="8">toggle( false )</option>
</select>
<input id="btnSwitch" type="button" value="切换显示/隐藏" >

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

//【切换显示/隐藏】按钮
$("#btnSwitch").click( function(){
    var v = $("#animation").val();
    if( v == "1" ){
        $("p").toggle( );       
    }else if(v == "2"){
        $("p").toggle( "slow" );    
    }else if(v == "3"){
        $("p").toggle( 3000 );  
    }else if(v == "4"){
        $("p").toggle( 1000, function(){
            alert("切换完毕!");
        } );
    }else if(v == "5"){
        $("p").toggle( 1000, "linear" );    
    }else if(v == "6"){
        $("p").toggle( { duration: 1000 } );    
    }else if(v == "7"){
        $("p").toggle( true ); // 相当于$("p").show(); 
    }else if(v == "8"){
        $("p").toggle( false );  // 相当于$("p").hide();
    }
} );

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!