Heim > Artikel > Web-Frontend > Welche Methode ist das Einblenden von JQuery?
Welche Methode ist das Einblenden von JQuery?
- 青灯夜游Original
- 2022-05-17 14:49:062162Durchsuche
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)“.
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);
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>
2, fadeTo()-Methode
fadeTo()-Methode ermöglicht das Ausblenden auf eine bestimmte Deckkraft (Wert zwischen 0 und 1).
Syntax:
$(selector).fadeTo(speed,opacity,callback);
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);
});
});
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);
});
});
【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!