Welche Methode ist das Einblenden von JQuery?-Front-End-Fragen und Antworten-php.cn

Welche Methode ist das Einblenden von JQuery?

青灯夜游

Freigeben： 2022-06-07 17:39:29

Original

2246 Leute haben es durchsucht

Es gibt drei Möglichkeiten zum Einblenden: 1. fadeIn(), das versteckte Elemente einblenden kann, die Syntax ist „element object.fadeIn (Einblenddauer)“; 2. fadeTo(), die Syntax ist „element object .fadeTo(duration, 1)“; 3. fadeToggle(), Syntax „object.fadeToggle(duration)“.

Welche Methode ist das Einblenden von JQuery?

Die Betriebsumgebung dieses Tutorials: Windows7-System, JQuery3.2.1-Version, Dell G3-Computer.

In jquery gibt es drei Methoden, um den Einblendeffekt zu erzielen:

fadeIn()-Methode
fadeToggle()-Methode
fadeTo()-Methode

1, fadeIn( )-Methode

fadeIn() wird zum Einblenden versteckter Elemente verwendet.

Syntax:

$(selector).fadeIn(speed,callback);

Nach dem Login kopieren

Der optionale Geschwindigkeitsparameter gibt die Dauer des Effekts an. Es kann die folgenden Werte annehmen: „langsam“, „schnell“ oder Millisekunden. .
Der optionale Rückrufparameter ist der Name der Funktion, die nach Abschluss des Fadings ausgeführt werden soll.

Beispiel:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-3.2.1.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					$("#div1").fadeIn();
					$("#div2").fadeIn("slow");
					$("#div3").fadeIn(3000);
				});
			});
		</script>
	</head>

	<body>
		<p>以下实例演示了 fadeIn() 使用了不同参数的效果。</p>
		<button>点击淡入 div 元素。</button>
		<br><br>
		<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
		<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
		<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>

	</body>
</html>

Nach dem Login kopieren

Welche Methode ist das Einblenden von JQuery?

2, fadeTo()-Methode

fadeTo()-Methode ermöglicht das Ausblenden auf eine bestimmte Deckkraft (Wert zwischen 0 und 1).

Syntax:

$(selector).fadeTo(speed,opacity,callback);

Nach dem Login kopieren

Der erforderliche Geschwindigkeitsparameter gibt die Dauer des Effekts an. Es kann die folgenden Werte annehmen: „langsam“, „schnell“ oder Millisekunden. Der erforderliche Deckkraftparameter in der Methode
fadeTo() legt den Fade-Effekt auf die angegebene Deckkraft (Wert zwischen 0 und 1) fest.
Der optionale Rückrufparameter ist der Name der Funktion, die nach Abschluss der Funktion ausgeführt werden soll.

Setzen Sie einfach den Wert des opacityc-Parameters auf 1, um den Einblendeffekt zu erzielen.

$(document).ready(function() {
	$("button").click(function() {
		$("#div1").fadeTo("fast",1);
		$("#div2").fadeTo("slow",1);
		$("#div3").fadeTo(5000,1);
	});
});

Nach dem Login kopieren

Welche Methode ist das Einblenden von JQuery?

3. fadeToggle()-Methode

fadeToggle()-Methode kann zwischen fadeIn()- und fadeOut()-Methoden wechseln.

fadeToggle() fügt dem Element einen Einblendeffekt hinzu, wenn es ausgeblendet ist.
fadeToggle() fügt dem Element einen Fade-Effekt hinzu, wenn es bereits angezeigt wird.

$(document).ready(function() {
	$("button").click(function() {
		$("#div1").fadeToggle();
		$("#div2").fadeToggle("slow");
		$("#div3").fadeToggle(5000);
	});
});

Nach dem Login kopieren

Welche Methode ist das Einblenden von JQuery?

【Empfohlenes Lernen: jQuery-Video-Tutorial, Web-Frontend-Video】

Das obige ist der detaillierte Inhalt vonWelche Methode ist das Einblenden von JQuery?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!