So lassen Sie Wörter in Javascript langsam erscheinen

WBOY
Freigeben: 2022-04-13 17:58:55
Original
2585 Leute haben es durchsucht

In JavaScript können Sie die Deckkraft des ausgewählten Elements schrittweise von ausgeblendet auf sichtbar ändern. Sie können die Geschwindigkeit festlegen, mit der das Wort langsam im Parameter angezeigt wird. Die Syntax lautet „Textelementobjekt“. fadeIn(speed);".

So lassen Sie Wörter in Javascript langsam erscheinen

Die Betriebsumgebung dieses Tutorials: Windows 10-System, JavaScript-Version 1.8.5, Dell G3-Computer.

So lassen Sie Wörter in JavaScript langsam erscheinen

Die FadeIn()-Methode ändert die Deckkraft des ausgewählten Elements schrittweise von ausgeblendet auf sichtbar (Fading-Effekt).

Die Syntax lautet:

$(selector).fadeIn(speed,easing,callback)
Nach dem Login kopieren

Die Parameter sind:

speed optional. Gibt die Geschwindigkeit des Fading-Effekts an. Mögliche Werte:

  • ms

  • "langsam"

  • "schnell"

easing Optional. Gibt die Geschwindigkeit des Elements an verschiedenen Punkten in der Animation an. Der Standardwert ist „swing“. Mögliche Werte:

  • „swing“ – bewegt sich langsam am Anfang/Ende, bewegt sich schnell in der Mitte

  • „linear“ – bewegt sich mit konstanter Geschwindigkeit

callback Optional. Die Funktion, die nach der Ausführung der fadeIn()-Methode ausgeführt werden soll.

Das Beispiel sieht wie folgt aus:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>123</title>
<script src="js/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$(".btn1").click(function(){
$("p").fadeOut(3000)
});
$(".btn2").click(function(){
$("p").fadeIn(3000);
});
});
</script>
</head>
<body>
<button class="btn1">淡出</button>
<button class="btn2">淡入</button>
<p>这是一个段落。</p>
</body>
</html>
Nach dem Login kopieren

Ausgabeergebnis:

So lassen Sie Wörter in Javascript langsam erscheinen

[Verwandte Empfehlungen: Javascript-Video-Tutorial, Web-Frontend]

Das obige ist der detaillierte Inhalt vonSo lassen Sie Wörter in Javascript langsam erscheinen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!