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

Die Funktion

toggle() wird verwendet, um alle übereinstimmenden Elemente umzuschalten. Darüber hinaus können Sie auch Übergangsanimationseffekte für den Elementwechsel festlegen.

Der sogenannte „Schalter“ bedeutet, dass, wenn das Element derzeit sichtbar ist, es ausgeblendet wird; wenn das Element derzeit ausgeblendet ist, wird es angezeigt (sichtbar).

Die hier vorgestellte Funktion toggle() wird verwendet, um die Anzeige/Ausblendung von Elementen umzuschalten. jQuery verfügt außerdem über eine Ereignisfunktion toggle() mit demselben Namen, die zum Binden des Klickereignisses und zum Umschalten verwendet wird, um bei Auslösung nacheinander verschiedene Ereignisverarbeitungsfunktionen auszuführen.

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

Syntax

Diese Funktion ist neu in jQuery 1.0. Die Funktion toggle() hat hauptsächlich die folgenden zwei Verwendungsformen:

Verwendung 1: jQuery 1.4.3 unterstützt neu die Parameterbeschleunigung.

jQueryObject.toggle( [ Dauer ] [, Erleichterung ] [, vollständig ] )

Verwendung 2:

jQueryObject.toggle( Optionen )

Verwendung Die zweite ist eine Variante der Verwendung. Geben Sie die erforderlichen Optionsparameter in Objektform an (Sie können mehr Optionsparameter als Verwendung 1 angeben).

Verwendung 3: jQuery 1.3 unterstützt diese Verwendung neu.

jQueryObject.toggle( showOrHide )

Gibt an, ob das Element durch den booleschen Wert showOrHide angezeigt oder ausgeblendet werden soll.

Parameter

Parameterbeschreibung

Dauer Optional/String/Zahlentyp gibt an, wie lange die Übergangsanimation läuft (Anzahl in Millisekunden), der Standardwert ist 400. Dieser Parameter kann auch string„schnell“ (=200) oder „langsam“ (=600) sein.

Easing Optional/String-Typ gibt an, welcher Animationseffekt verwendet werden soll. Der Standardwert ist „Swing“ oder der Funktionsname anderer benutzerdefinierter Animationsstile.

Das vollständige Element vom Typ „Optional/Funktion“ muss ausgeführt werden, nachdem die Funktion angezeigt wurde. Dies innerhalb der Funktion zeigt auf das aktuelle DOM-Element.

Optionen Objektklasse gibt das Optionsparameterobjekt an.

Der boolesche Typ showOrHide gibt einen booleschen Wert zum Ein-/Ausblenden von Elementen an. Wenn true, wird das Element angezeigt, andernfalls wird es ausgeblendet.

Wenn für toggle() keine Parameter angegeben sind, besteht der schnellste Weg darin, das Element direkt ein-/auszublenden, ohne Animationseffekte zu verwenden.

Das Parameteroptionsobjekt kann die folgenden Attribute identifizieren (die folgenden Attribute sind optional):

Attributattributbeschreibung

Dauer Siehe Parameterdauer.

Easing Siehe Parameter Easing.

vollständig Siehe Parameter abgeschlossen.

queue Der boolesche Typ gibt an, ob die Animation in die Effektwarteschlange gestellt werden soll. Der Standardwert ist true. Ab Version 1.7 kann dieser Parameter eine Zeichenfolge sein, die zum Einfügen in die Effektwarteschlange mit dem angegebenen Namen verwendet wird. Wenn die von Ihnen angegebene Warteschlange nicht automatisch startet, müssen Sie dequeue("queueName") manuell aufrufen, um die Warteschlange zu starten.

Darüber hinaus haben jQuery 1.4 und 1.8 auch viele neue Optionsunterstützungen für Parameteroptionen hinzugefügt, diese Parameter werden jedoch nicht häufig verwendet und werden hier nicht beschrieben. Weitere Informationen finden Sie in der offiziellen Dokumentation von jQuery.

Rückgabewert

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

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

Umschalteffekt:

<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="切换显示/隐藏" >

Das Folgende ist dasselbe als toggle( )-funktionsbezogener jQuery-Beispielcode, um die spezifische Verwendung der toggle()-Funktion zu demonstrieren:

//【切换显示/隐藏】按钮
$("#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();
    }
} );

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