Detaillierte Erläuterung der Verwendung der jQuery.slideToggle()-Funktion

Die Funktion slideToggle() wird verwendet, um alle passenden Elemente mit dem Animationseffekt für gleitende Übergänge zu wechseln.

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

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

Syntax

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

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

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

Verwendung zwei:

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

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“ und kann auch auf „linear“ oder andere benutzerdefinierte Animationsstil-Funktionsnamen eingestellt werden.

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.

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

Attribut Attributbeschreibung

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

slideToggle()Der Rückgabewert der Funktion ist vom Typ jQuery und gibt das aktuelle jQuery-Objekt selbst zurück.

Beispiele & Anleitungen

Bitte beachten Sie den folgenden anfänglichen HTML-Code:

e388a4556c0f65e1904146cc1a846beeCodePlayer94b3e26ee717c64999d7867364b1b4a3

e388a4556c0f65e1904146cc1a846beeFocus Teilen über Programmierentwicklungstechnologie94b3e26ee717c64999d7867364b1b4a3

Gleitender Umschalteffekt:

3966846cdd030ebcb077381edce2b072

7b7725f2e08f97318ab4eed9ba233cb3

7bfdea07c9b5e145441728e641150443slideToggle( "slow" )4afa15d3069109ac30911f04c56f3338

5ba26a0db61dcce24faad144348b08a4slideToggle( 3000 )4afa15d3069109ac30911f04c56f3338

ccbcb9736adf3fafd4a4c2c497760953slideToggle( 1000, komplett )4afa15d3069109ac30911f04c56f3338

aaa1a70849e9a1e83a36c9ca5549358dslideToggle( 1000, "linear" )4afa15d3069109ac30911f04c56f3338

ed1a4eaf9baabdebbfb66c11d76987easlideToggle( options )4afa15d3069109ac30911f04c56f3338

b38bcc2238ab4d1406940bf887819d23

1c677aaacd869da6cc9ae78bff02193a

Das Folgende ist dasselbe als jQuery-Beispielcode im Zusammenhang mit der Funktion slideToggle(), um die spezifische Verwendung der Funktion slideToggle() zu demonstrieren:

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

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung der jQuery.slideToggle()-Funktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!