Das jQuery-Framework implementiert drei Animationsmethoden zum Anzeigen und Ausblenden von Elementen

Dieser Artikel wird von der Huawei Cloud Community geteilt: „jQuery-Framework zum Implementieren von Animationen zum Anzeigen und Ausblenden von Elementen [mit Fallanalyse]“, der ursprüngliche Autor ist: Gray Monkey.

Schauen wir uns zunächst ein einfaches Diagramm zu Animationseffekten an:

​

Ich habe meinen Freunden bereits erzählt, dass sich mit dem jQuery-Framework die Attribute von Elementen in HTML manipulieren lassen, sodass das, was oben angezeigt und ausgeblendet wird, nur ein Div und kein Bild ist. Jetzt erkläre ich Ihnen, wie Sie die Attribute eines Elements manipulieren, um es anzuzeigen oder auszublenden!

Zum Ein- und Ausblenden von Elementobjekten gibt es im jQuery-Framework drei Möglichkeiten, nämlich „Standardmäßig anzeigen und ausblenden“, „Durch Verschieben anzeigen und ausblenden“ und „Durch Ein- und Ausblenden anzeigen und ausblenden“. Als nächstes stellen wir diese drei Methoden jeweils vor.

1. Standardmäßig anzeigen und ausblenden

Standardmäßig ist die Methode zum Anzeigen eines Elements

zeigen([Geschwindigkeit,[Beschleunigung],[fn]])

Die Bedeutung der Parameter ist:

• Geschwindigkeit: Die Geschwindigkeit der Animation. Einer von drei vordefinierten Werten („langsam“, „normal“, „schnell“) oder eine Zahl in Millisekunden, die die Dauer der Animation angibt (z. B. 1000)
• Easing: Wird verwendet, um den Übergangseffekt festzulegen. Der Standardwert ist „Swing“, der verfügbare Parameter ist „linear“. * Swing: Die Animation ist zuerst langsam, in der Mitte schnell und am Ende wieder langsam. * linear: Die Animation wird mit konstanter Geschwindigkeit ausgeführt
• fn: Die Funktion, die nach Abschluss der Animation einmal für jedes Element ausgeführt werden soll.

Gleichzeitig möchten wir Sie daran erinnern, dass die oben genannten drei Parameter optional sind. Wenn Sie sie nicht festlegen, werden sie mit den Standardwerten ausgeführt.

Der folgende Beispielcode:

// Zeige das div
 $("#showDiv").show("langsam","swing");
 Lineare konstante Geschwindigkeit

Die Standardmethode zum Ausblenden eines Elements ist

ausblenden([Geschwindigkeit,[Beschleunigung],[fn]])

Die Bedeutung der Parameter ist die gleiche wie in der Show-Methode. Dieselben drei Parameter sind optional. Wenn sie nicht festgelegt sind, werden sie mit den Standardwerten ausgeführt. Hier fügen wir eine abschließende Ausführungsfunktion hinzu, um ein Fenster „Versteckt…“ zu öffnen.

Der folgende Beispielcode:

//Div ausblenden
$("#showDiv").hide("langsam","swing",funktion () {
    alert("Versteckt…")
});

Müssen wir also jedes Mal eine Methode zum Anzeigen von Elementen und eine andere Methode zum Ausblenden von Elementen definieren? Nicht wirklich. jQuery hat dies vollständig berücksichtigt, daher gibt es eine Methode, die sowohl anzeigen als auch ausblenden kann.

Umschalten ([Geschwindigkeit], [Beschleunigung], [Fn])

Wenn diese Methode aufgerufen wird, wird das Element ausgeblendet, ähnlich wie bei der Methode hide(). Wenn sie erneut aufgerufen wird, wird das Element wieder angezeigt, ähnlich wie bei der Methode show(). Die Bedeutung der Parameter ist die gleiche wie oben

Der Beispielcode lautet wie folgt:

//Kann angezeigt oder ausgeblendet werden$("#showDiv").toggle("slow","linear");

Der standardmäßig erzielte Effekt ist wie folgt:

​

2. Schieben Sie zum Anzeigen und Ausblenden

Wir sollten anhand des Namens erkennen können, dass der Unterschied zwischen dem Gleitmodus und dem Standardmodus eigentlich die unterschiedlichen Animationen beim Anzeigen und Ausblenden sind. Als Nächstes stellen wir vor, wie man Elemente im Gleitmodus anzeigt, ausblendet und sowohl ein- als auch ausblendet.

Anzeige im Schiebemodus

slideDown([Geschwindigkeit],[Beschleunigung],[fn])

Beispielcode:

//Zum Anzeigen des Div verschieben
$("#showDiv").slideDown("langsam");

Ausblenden durch Verschieben

slideUp([Geschwindigkeit,[Beschleunigung],[fn]])

Beispielcode:

// Schieben, um das Div auszublenden
$("#showDiv").slideUp("abrufen");

Schiebemodus zum Anzeigen und Ausblenden von:

slideToggle([Geschwindigkeit],[Beschleunigung],[fn])

Beispielcode:

// Zum Anzeigen oder Ausblenden schieben $("#showDiv").slideToggle("slow");

Der im Gleitmodus erzielte Effekt ist wie folgt:

​

3. Ein- und Ausblenden durch Ein- und Ausblenden

Das Anzeigen und Ausblenden von Elementen im Ein- und Ausblendmodus ist eigentlich dasselbe wie bei den beiden oben genannten Methoden, der einzige Unterschied ist der Anzeigeeffekt.

Im Ein- und Ausblendmodus wird folgende Methode verwendet:

fadeIn([Geschwindigkeit],[Beschleunigung],[fn])

Implementierungscode:

// div ausblenden
$("#showDiv").fadeIn("langsam")

Ausblenden im Ein- und Ausblendmodus

fadeOut([Geschwindigkeit],[Beschleunigung],[fn])

Implementierungscode:

// verstecktes Div ausblenden
$("#showDiv").fadeOut("abrufen");

Ein- und Ausblenden im Ein- und Ausblendmodus

fadeToggle([Geschwindigkeit,[Beschleunigung],[fn]])

Implementierungscode:

// Ein- und Ausblenden, um Divs anzuzeigen und auszublenden
$("#showDiv").fadeToggle("abrufen")

Der Effekt des Ausführens im Einblend- und Ausblendmodus ist wie folgt:

​

Oben wird beschrieben, wie Elemente mithilfe des jQuery-Frameworks angezeigt und ausgeblendet werden. Hier ist der vollständige Implementierungscode für das obige Beispiel:

<!DOCTYPE html>
<html>
<Kopf>
    <meta charset="UTF-8">
    <title>Standardmäßige Anzeige- und Ausblendanimation</title>
    <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
    
    <Skript>
        Funktion hideFn() {
            //Div ausblenden
            /*$("#showDiv").hide("langsam","swing",funktion () {
                alert("Versteckt…")
            });*/

            // Schieben, um das Div auszublenden
            $("#showDiv").slideUp("abrufen");

            // verstecktes Div ausblenden
            // $("#showDiv").fadeOut("abrufen");

        }
        
        Funktion showFn() {
            // Zeige das div
            // $("#showDiv").show("langsam","swing");
            // lineare, gleichmäßige Geschwindigkeit // Schieben, um div anzuzeigen
            // $("#showDiv").slideDown("langsam");

            // div ausblenden
            $("#showDiv").fadeIn("langsam")
        }
        
        Funktion toggleFn() {
            //Kann angezeigt oder ausgeblendet werden// $("#showDiv").toggle("slow","linear");

            // Zum Anzeigen oder Ausblenden schieben // $("#showDiv").slideToggle("slow");

            // Ein- und Ausblenden, um Divs anzuzeigen und auszublenden
            $("#showDiv").fadeToggle("abrufen")
        }
        
    </Skript>
    
</Kopf>
<Text>
<input type="button" value="Klicken Sie auf die Schaltfläche, um das Div auszublenden" onclick="hideFn()">
<input type="button" value="Klicken Sie auf die Schaltfläche, um div anzuzeigen" onclick="showFn()">
<input type="button" value="Klicken Sie auf die Schaltfläche, um die Div-Anzeige umzuschalten und auszublenden" onclick="toggleFn()">

<div id="showDiv" style="Breite:300px;Höhe:300px;Hintergrund:pink">
    div ein- und ausblenden
</body>
</html>

IV. Fall: Automatisches Ein- und Ausblenden von Werbung

Nachdem wir nun wissen, wie man Elemente im jQuery-Framework ein- und ausblendet, sollten wir es in der Praxis anwenden. Das folgende Beispiel zeigt, wie man Werbung automatisch ein- und ausblendet, um die Praxis dieser Technologie weiter zu stärken.

Was wir erreichen möchten, ist, dass auf einer einfachen Webseite das Werbebild drei Sekunden nach dem Öffnen der Seite angezeigt und die Werbung nach fünf Sekunden ausgeblendet wird. Dabei ist der Vorgang des Anzeigens und Ausblendens des Werbebilds gemäß der obigen Erklärung einfach umzusetzen. Wie sollten wir also die verzögerte Anzeige und Ausblendung implementieren?

Hier müssen wir einen Timer setTimeout (Methode, Zeit) in js verwenden;

Der erste Parameter dieser Methode ist ein Methodenname, beispielsweise zum Anzeigen oder Ausblenden eines Bildes und der zweite Parameter ist die Anzahl der Millisekunden, die angibt, wie viele Sekunden nach dem Laden der Seite die Methode ausgeführt wird.

Dann können wir gemäß dieser Idee in die Eingabefunktion von jQuery schreiben, dass die Methode zum Anzeigen des Bildes 3000 Millisekunden nach dem Laden der Seite aufgerufen wird, also drei Sekunden später; die Methode zum Ausblenden des Bildes wird 8000 Millisekunden nach dem Laden der Seite aufgerufen, also acht Sekunden später, und die verbleibenden fünf Sekunden dazwischen sind die Zeit zum Anzeigen des Bildes.

Lassen Sie uns über die Implementierung der oben genannten Anforderungen sprechen. Der vollständige Code lautet wie folgt:

<!DOCTYPE html>
<html>
<Kopf>
    <meta charset="UTF-8">
    <title>Automatisches Ein- und Ausblenden von Werbung</title>
    <Stil>
        #Inhalt{Breite:100%;Höhe:500px;Hintergrund:#999}
    </Stil>

    <!--jQuery einführen-->
    <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
    <Skript>
        // Schritte zum Verzögern der Anzeige und des Ausblendens von Bildern // 1. Rufen Sie die Timer-Methode setTimeout() auf, nachdem die Seite geladen wurde. // 2. Rufen Sie die Funktionen zum Anzeigen und Ausblenden von Anzeigen im Timer auf. // 3. Verwenden Sie die Methoden show und hide, um Bilder anzuzeigen und auszublenden. // Legen Sie die Eingabefunktion $(function () { fest.
            // Bild nach einer Verzögerung von 3 Sekunden anzeigen setTimeout(adShow,3000);
            // Bild nach 6 Sekunden ausblenden setTimeout(adHide,8000);
        });
        // Bild anzeigen Funktion adShow() {
            $("#ad").show("langsam");
        }

        //Bild ausblenden Funktion adHide() {
            $("#ad").hide("schnell");
        }

    </Skript>
</Kopf>
<Text>
<!-- Gesamt-DIV -->
<div>
    <!-- Anzeige DIV -->
    <div id="Anzeige" style="Anzeige: keine;">
        <img style="width:100%" src="../img/adv.jpg" />
    </div>

    <!-- Haupttext unten -->
    <div id="Inhalt">
        Körperteil</div>
</div>
</body>
</html>

Die Wirkung ist wie folgt:

Oben sind die Details der drei Möglichkeiten zum Implementieren von Elementanzeige- und -versteckanimationen im jQuery-Framework aufgeführt. Weitere Informationen zum Anzeigen und Verstecken von jQuery finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!