Home > Web Front-end > Front-end Q&A > How to make words appear slowly in javascript

How to make words appear slowly in javascript

WBOY
Release: 2022-04-13 17:58:55
Original
2623 people have browsed it

In JavaScript, you can use the fadeIn() method to realize the word slowly appearing. This method can gradually change the opacity of the selected element from hidden to visible. You can set the speed of the word slowly appearing in the parameter. , the syntax is "text element object.fadeIn(speed);".

How to make words appear slowly in javascript

The operating environment of this tutorial: Windows 10 system, JavaScript version 1.8.5, Dell G3 computer.

How to make words appear slowly in javascript

fadeIn() method gradually changes the opacity of the selected element from hidden to visible (fading effect).

The syntax is:

$(selector).fadeIn(speed,easing,callback)
Copy after login

The parameters are:

speed is optional. Specifies the speed of the fading effect. Possible values:

  • milliseconds

  • "slow"

  • "fast"

easing Optional. Specifies the element's speed at different points in the animation. The default value is "swing". Possible values:

  • "swing" - moves slower at the beginning/end, faster in the middle

  • "linear" - moves at a constant speed

callback Optional. The function to be executed after the fadeIn() method is executed.

The example is as follows:

<!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>
Copy after login

Output result:

How to make words appear slowly in javascript

##[Related recommendations:

javascript video tutorialwebfrontend

The above is the detailed content of How to make words appear slowly in javascript. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template