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
Erklärung der Funktionsweise und Verwendung von Redux
Inhaltsverzeichnis 1. Was ist Redux? 2. Das Redux...
Vue-Formular-Post-Anforderung kombiniert mit Servlet zur Realisierung der Datei-Upload-Funktion
Code der Front-End-Testseite: <Vorlage> <...
Implementierungsbeispiel eines Videoplayers basierend auf Vue
Wenn der vorhandene Videoplayer die Anforderungen...
Analyse der Vor- und Nachteile von gespeicherten MySQL-Prozeduren
MySQL Version 5.0 begann, gespeicherte Prozeduren...
CSS-Probleme bei der gemeinsamen Verwendung von „Position:fixed“ und „Margin-top“ auf Elementen derselben Ebene
Problembeschreibung Ich möchte CSS verwenden, um ...
Detailliertes Tutorial zur Installation von Docker auf CentOS 8
1. Frühere Versionen yum entfernen Docker Docker-...
Sicherheitsüberlegungen zur Windows-Serververwaltung
Webserver 1. Der Webserver schaltet unnötige IIS-...
Vue+Flask realisiert Videosynthesefunktion (Drag & Drop-Upload)
Inhaltsverzeichnis Wir haben in einem früheren Ar...
Einführung in die Cloud-native-Technologie Kubernetes (K8S)
Inhaltsverzeichnis 01 Was ist Kubernetes? 02 Der ...
In einem Artikel erfahren Sie, wie Sie mehrere DIVs und Schaltflächenbindungs-Eingabeereignisse in VUE implementieren
Aktuell besteht die Anforderung, dass beim Klicke...
Natives JS-objektorientiertes Tippspiel
In diesem Artikel wird der spezifische Code des o...
jQuery+Ajax zum Erreichen eines einfachen Paging-Effekts
In diesem Artikel wird der spezifische Code von j...
Detaillierte Analyse von HTML-Tabellen-Tags und damit verbundenen Zeilenumbruchproblemen
Was ist eine Tabelle? Eine Tabelle ist eine HTML-...
Mysql implementiert Master-Slave-Konfiguration und Multi-Master-Multi-Slave-Konfiguration
Was wir jetzt simulieren, ist ein Master-Slave-Sy...
Detaillierte Erklärung der NodeJS-Modularität
Inhaltsverzeichnis 1. Einleitung 2. Haupttext 2.1...