JQuery implementiert das Ausblenden und Anzeigen von Animationseffekten
|
In diesem Artikel wird der spezifische Code von JQuery zum Ausblenden und Anzeigen von Animationseffekten zu Ihrer Information beschrieben. Der spezifische Inhalt ist wie folgt Ausblenden und AnzeigenGrammatik
Parameterbeschreibung: Der optionale Geschwindigkeitsparameter gibt die Geschwindigkeit des Ausblendens/Einblendens an und kann folgende Werte annehmen: „langsam“, „schnell“ oder Millisekunden. Implementierungscode <!DOCTYPE html>
<html>
<Kopf>
<meta charset="UTF-8">
<title>Dokumentenverarbeitung</title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<Stil>
div {
Hintergrund: hellblau;
Polsterung: 20px;
}
P {
Hintergrund: Lavendelrot;
Polsterung: 20px;
}
</Stil>
<Skript>
$(Funktion() {
$("#btnHide").klick(function() {
//$("div").hide();
//$("div").hide(2000);
$("div").hide(2000, function() {
alert("Ausblenden abgeschlossen!");
});
});
$("#btnShow").klick(function() {
//$("div").anzeigen();
//$("div").zeigen(2000);
$("div").show(2000, Funktion() {
alert("Anzeige abgeschlossen!");
});
});
$("#btnToggle").klick(function() {
//$("p").schalten();
//$("p").Umschalten(2000);
$("p").toggle(2000, Funktion() {
alert("Wechsel abgeschlossen!");
});
});
});
</Skript>
</Kopf>
<Text>
<button id="btnHide">Div ausblenden</button>
<button id="btnShow">Div anzeigen</button>
<button id="btnToggle">Anzeigen und Ausblenden umschalten -p</button>
<div>div1</div>
<br/>
<div>div2</div>
<p style="Anzeige: keine;">p1</p>
<p>p2</p>
</body>
</html>Effektanzeige Effektanzeige ausblenden
Anzeigeeffektanzeige
Ein- und Ausblenden umschalten Von P1 auf P2 umgestellt
Ein- und AusblendenGrammatik
Parameterbeschreibung: Der optionale Geschwindigkeitsparameter gibt die Geschwindigkeit des Ausblendens/Einblendens an und kann folgende Werte annehmen: „langsam“, „schnell“ oder Millisekunden. Implementierungscode <!DOCTYPE html>
<html>
<Kopf>
<meta charset="UTF-8">
<title>Wirkung</title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<Stil>
div {
Hintergrund: hellblau;
Polsterung: 20px;
}
P {
Hintergrund: Lavendelrot;
Polsterung: 20px;
}
</Stil>
<Skript>
$(Funktion() {
$("#btnIn").klick(function() {
//$("div").fadeIn();
//$("div").fadeIn(2000);
$("div").fadeIn(2000, Funktion() {
alert("Einblenden abgeschlossen!");
});
});
$("#btnOut").klick(function() {
//$("div").fadeOut();
//$("div").fadeOut(2000);
$("div").fadeOut(2000, Funktion() {
alert("Ausblenden abgeschlossen!");
});
});
$("#btnToggle").klick(function() {
//$("p").fadeToggle();
//$("p").fadeToggle(2000);
$("p").fadeToggle(2000, Funktion() {
alert("Wechsel abgeschlossen!");
});
});
});
</Skript>
</Kopf>
<Text>
<button id="btnIn">Einblend-Div</button>
<button id="btnOut">Ausblend-Div</button>
<button id="btnToggle">Ein- und Ausblenden umschalten - P</button>
<div>div1</div>
<br/>
<div>div2</div>
<p style="Anzeige: keine;">p1</p>
<p>p2</p>
</body>
</html>Der Effekt unterscheidet sich nicht wesentlich vom Verstecken und Zeigen 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:
|
>>: Beschreiben Sie kurz die Replikation der MySQL-Überwachungsgruppe
Artikel empfehlen
Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.12 (Windows 10)
Dieser Artikel zeichnet das Installations-Grafik-...
Zusammenfassung der Implementierungsmethoden und Punkte der H5-Wakeup-APP
Inhaltsverzeichnis Vorwort Zur APP-Methode spring...
jQuery benutzerdefinierter Lupeneffekt
In diesem Artikelbeispiel wird der spezifische Co...
Installations- und Nutzungsanalyse von Portainer, einem visuellen UI-Verwaltungstool für Docker
Portainer ist ein hervorragendes grafisches Verwa...
So konfigurieren Sie NAS unter Windows Server 2019
Vorwort Dieses Tutorial installiert die neuste Ve...
Leitfaden zur effizienten Nutzung von MySQL-Indizes
Vorwort Ich glaube, die meisten Leute haben MySQL...
Beispiele für die Verwendung der oder-Anweisung in MySQL
1. Die Verwendung der oder Syntax in MySQL und di...
Einfache Implementierungsmethode zur Linux-Prozessüberwachung und zum automatischen Neustart
Zweck: Unter Linux kann das Serverprogramm aus ve...
Verwenden Sie das ab-Tool, um einen API-Stresstest auf dem Server durchzuführen
Inhaltsverzeichnis 1 Eine kurze Einführung in den...
Der gesamte Prozess der Entwicklung eines Google-Plug-Ins mit vue+element
Einfache Funktion: Klicken Sie auf das Plug-In-Sy...
Elegante praktische Aufzeichnung der Einführung der Iconfont-Symbolbibliothek in Vue
Inhaltsverzeichnis Vorwort SVG generieren Einführ...
Kurze Analyse der geplanten MySQL-Sicherungsaufgaben
Einführung Um Datenverlust in einer Produktionsum...
Detaillierte Erklärung zur Einführung benutzerdefinierter Schriftarten (Font-Face) in CSS
Warum habe ich das verwendet? Alles begann mit de...
Fallstudie zum Löschen und Neuinstallieren eines Mac-Knotens
Mac-Knoten löschen und neu installieren löschen K...
Confluence mit Docker bereitstellen
1. Umweltanforderungen 1. Docker 17 und höher wur...