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
Detaillierte Erklärung des Hash-Jump-Prinzips von Vue
Inhaltsverzeichnis Der Unterschied zwischen Hash ...
So richten Sie Nginx so ein, dass der Domänenname an den angegebenen Port weitergeleitet wird
Geben Sie /usr/local/nginx/conf ein sudo cd /usr/...
So gehen Sie mit dem Verlust von Parametern um, wenn Sie die Seite aktualisieren und Parameter an den Vue-Router übergeben
Inhaltsverzeichnis Überblick Methode 1: Parameter...
So stellen Sie eine Verbindung zu einem Remoteserver her und übertragen Dateien über einen Jump-Server in Linux
Vor kurzem traten bei der Bereitstellung der Umge...
Docker-Praxis: Python-Anwendungscontainerisierung
1. Einleitung Container nutzen einen Sandbox-Mech...
Den praktischen Wert der CSS-Eigenschaft *-gradient erkunden
Lassen Sie mich zunächst eine interessante Eigens...
Tutorial zur Installation von MySQL 8.0.11 unter Linux
1. Gehen Sie zur offiziellen Website, um das Inst...
Vue Router lädt verschiedene Komponenten je nach Hintergrunddaten
Inhaltsverzeichnis Anforderungen aus der Projektp...
Schreibreihenfolge und Namenskonventionen sowie Vorsichtsmaßnahmen im CSS-Stil
Die Bedeutung der Schreibreihenfolge Reduzieren S...
Beispielcode zur Implementierung der Ellipsenbahnrotation mit CSS3
In letzter Zeit müssen folgende Effekte erzielt w...
Ein unvollständiger Leitfaden zur JavaScript-Toolchain
Inhaltsverzeichnis Überblick Statische Typprüfung...
Vue realisiert Preiskalendereffekt
In diesem Artikelbeispiel wird der spezifische Co...
Vue-Anfängerhandbuch: Umgebungserstellung und Erste Schritte
Inhaltsverzeichnis Erster Blick Erstellen einer V...
So verwenden Sie die ElementUI-Paginierungskomponente Paginierung in Vue
Die Verwendung der ElementUI-Paging-Komponente Pa...
Implementierung neuer Probleme mit CSS3-Selektoren
Inhaltsverzeichnis Grundlegende Selektorerweiteru...