Detaillierte Erläuterung der Verwendung der jQuery.fadeOut()-Funktionsinstanz

Die Funktion

fadeOut() wird verwendet, um alle passenden Elemente mit einem Ausblendübergangs-Animationseffekt auszublenden.

Der sogenannte „Ausblend“-Animationseffekt, d. h. das Deckkraftverhältnis des Elements nimmt allmählich von 100 % auf 0 % ab.

Wenn das Element selbst ausgeblendet ist, werden keine Änderungen daran vorgenommen. Wenn das Element sichtbar ist, blenden Sie es aus.

Das Gegenteil dieser Funktion ist die Funktion fadeIn(), die verwendet wird, um alle passenden Elemente mit einem Einblend-Übergangsanimationseffekt anzuzeigen.

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

Syntax

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

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

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

Verwendung zwei:

jQueryObject.fadeOut( 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/Number-Typ gibt an, wie lange die Übergangsanimation läuft (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.

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 Effekt--Warteschlange 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

fadeOut()Der Rückgabewert der Funktion ist vom jQuery-Typ 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

Der verborgene Effekt von Fadeout:

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

Das Folgende ist der jQuery-Beispielcode im Zusammenhang mit der Funktion fadeOut(), um die Funktion fadeOut() zu demonstrieren Funktion Spezifische Verwendung:

//【显示】按钮
$("#btnShow").click( function(){
    $("p").show( );
} );
//【隐藏】按钮
$("#btnFadeOut").click( function(){
    var v = $("#animation").val();
    if( v == "1" ){
        $("p").fadeOut( );      
    }else if(v == "2"){
        $("p").fadeOut( "slow" );   
    }else if(v == "3"){
        $("p").fadeOut( 3000 ); 
    }else if(v == "4"){
        $("p").fadeOut( 2000, function(){
            alert("隐藏完毕!");
        } );    
    }else if(v == "5"){
        $("p").fadeOut( 1000, "linear" );   
    }else if(v == "6"){
        $("p").fadeOut( { duration: 1000 } );   
    }
} );

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