jQuery erzielt Ein- und Ausblendeffekte

Bevor wir jQuery verwenden, um den Ein- und Ausblendeffekt zu erzielen, machen wir uns zunächst mit einigen Codes vertraut:

fadeIn([ Geschwindigkeit , [ Beschleunigung] , [fn] ]), Parameter sind optional
fadeOut([ Geschwindigkeit , [ Beschleunigung] , [fn] ]), Parameter sind optional
Ein- und Ausblendschalter fadeToggle([ speed , [easing] , [fn] ]), Parameter können weggelassen werden
Ändern Sie die Transparenz fadeTo([ [speed] , opacity , [easing] , [fn] ]). Beachten Sie, dass Geschwindigkeit und Transparenz hier angegeben werden müssen.

Geschwindigkeit ist Geschwindigkeit
Lockerung ist der Übergangseffekt
fn ist die Rückruffunktion

Dann fügen wir den obigen Code in den Gesamtcode ein, um den Effekt zu sehen

Der vollständige Code lautet wie folgt

<!DOCTYPE html>
<html lang="de">
 
<Kopf>
    <meta charset="UTF-8">
    <Titel>Wellfancy</Titel>
    <Stil>
        div {
   Rand: 10px;
   Polsterung: 10px;
   Breite: 100px;
            Anzeige: keine;
        }
    </Stil>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</Kopf>
 
<Text>
    <button>Einblendeffekt</button>
    <button>Ausblendeffekt</button>
    <button>Ein- und Ausblenden-Schalter</button>
    <button>Transparenz ändern</button>
    <div>
  <img src="images/1.jpg" style="width: 280px;">
 </div>
    <Skript>
        $(Funktion() {
            $("Schaltfläche").eq(0).Klick(Funktion() {
                $("div").fadeIn(1000);
            })
            $("Schaltfläche").eq(1).Klick(Funktion() {
                $("div").fadeOut(1000);
 
            })
            $("Schaltfläche").eq(2).Klick(Funktion() {
                $("div").fadeToggle(1000);
 
            });
            $("Schaltfläche").eq(3).Klick(Funktion() {
                $("div").fadeTo(1000, 0,5);
 
            });
 
        });
    </Skript>
</body>
 
</html>

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:

Natives js und jquery, um den Ein- und Ausblendeffekt des Bildkarussells zu erzielen
Beispiele für mit jQuery implementierte Ein- und Ausblendeffekte
Einfache Implementierung von jQuery-Ein- und Ausblendeffekten
jQuery implementiert eine universelle Version des Ein- und Ausblendeffekts mit der Maus
jQuery-Implementierungscode zum Ein- und Ausblenden, Erweitern und Verkleinern von Menüs
Textein- und -ausblendeffekt basierend auf jQuery
Implementierung eines Karussells mit Ein- und Ausblendeffekten auf Basis von jQuery
Grundlegende Praxis von Ein- und Ausblende-Spezialeffekten basierend auf JQuery
Beispiel für Scrollen und Ein- und Ausblendeffekte bei einer jQuery-Nachrichtensendung
jQuery blendet Elemente ein und aus, um den Effekt lebendiger zu machen

<<: Stabile Version von MySQL 8.0.18 veröffentlicht! Hash Join ist wie erwartet da

>>: Detailliertes Tutorial zur Migration des Home-Verzeichnisses auf eine neue Partition unter Ubuntu