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
Allgemeine Download-, Installations- und Konfigurationsmethoden und einfache Bedienungskenntnisse für MySQL 5.7.20 (kostenlose Installation der Dekomprimierungsversion)
Ich habe gerade am frühen Morgen die Installation...
So entfernen Sie die Kopfzeile aus der Elementtabelle
Dokumenthinweise mit dem Attribut show-header <...
Detaillierte Einführung in die JavaScript-Funktion
Durch Funktionen lassen sich beliebig viele Anwei...
CSS3 zum Erzielen eines einfachen schwebenden Hintergrundeffekts mit weißen Wolken
Dies ist ein sehr einfacher, reiner CSS3-Hintergr...
Beispiel für die Verwendung von Dockerfile zum Erstellen eines Nginx-Images
Einführung in Dockerfile Docker kann automatisch ...
Detaillierte Erklärung des TS-Objekt-Spread-Operators und des Rest-Operators
Inhaltsverzeichnis Überblick Objektrestattribut E...
Lassen Sie uns ausführlich über die Richtung der langsamen SQL-Optimierung in MySQL sprechen
Inhaltsverzeichnis Vorwort SQL-Anweisungsoptimier...
Tutorial zur Installation von VMware ESXi 6.0 und Bereitstellung einer virtuellen Maschine (Bild und Text)
Das Unternehmen hatte einen gut konfigurierten Se...
Detaillierte Erklärung der berechneten Eigenschaften, der Überwachungseigenschaften und des Lebenszyklus in Vue.js
Inhaltsverzeichnis Vorwort Berechnete Eigenschaft...
js, um einen gleitenden Karusselleffekt zu erzielen
In diesem Artikel wird der spezifische Code von j...
Natives JS zum Erzielen eines Puzzle-Effekts
In diesem Artikel wird der spezifische Code von n...
jQuery simuliert einen Picker, um einen gleitenden Auswahleffekt zu erzielen
In diesem Artikel wird der spezifische Code von j...
Lösen Sie das Problem beim Einrichten des chinesischen Sprachpakets für den Docker-Container
Wenn Sie Docker verwenden, suchen Sie in Docker n...
Vue realisiert Click-Flip-Effekt
Verwenden Sie Vue, um einfach einen Click-Flip-Ef...