淡入淡出效果被描述为所选部分不透明度的逐渐增加和减少。换句话说，淡化效果被称为不透明度随时间的增加和减少。当这种效果在不透明度逐渐增加的情况下应用时，它被称为淡入效果。这是用于以选定的时间间隔在页面上的选定部分上应用淡入的效果。淡出和淡入效果非常适合在 Web 项目中使用，因为它强调网页的样式。我们在这些逻辑中使用setInterval() 方法和clearInterval() 方法。下面我们将使用两种方法进行适当的描述和示例。
使用 setInterval() 方法：在页面加载时，我们调用了一个名为fadeIn() 方法的函数。其中我们使用setInterval() 方法，它接受两个参数，一个是函数引用（在这种情况下是 show()），另一个是 timer（in number），它将在每个给定的时间间隔后调用show()函数。在show()函数，我们在名称为 ‘opacity’ 的变量中获取属性 opacity 并在每次调用淡入（）函数时将其增加 0.1。最初，所选部分的不透明度设置为 0。在脚本标记内声明了两个变量 opacity 和intervalID 。变量 opacity 处理项目的不透明度，而intervalID用于调用clearInterval()函数。然后window.onload=fadeIn ，用于自动调用fadeIn()函数。 FadeIn()函数调用一个内置方法 setInterval()，它接受两个参数，一个是函数引用（在本例中为 show()）和时间间隔（在选定的间隔后引用函数）。在 setInterval() 中，每 200 毫秒调用一次 show()函数，其中我们检查 body 的不透明度（变量 body 在 id 的帮助下保持完整的 body），如果它小于 1，则增量为 0.1 opacity 否则会调用clearInterval()函数，这将停止调用show()的函数。
注意：所选部分的不透明度设置为零以了解效果。
- 例子：
fade-in effect on page load using JavaScript
GeeksforGeeks
How to create fade-in effect on page load using javascriptThis page will fade-in after loading
- 输出：
使用 clearInterval() 方法：在这种方法中，在 setInterval() 方法的帮助下将完整的逻辑写入一个变量中，这里将编写完整的函数来代替函数引用。这种方法比较容易理解。 opacity 的默认值是 1。所以我们必须把它设置为零。观察输出window.onload=fadeIn ，用于自动调用fadeIn()函数。现在在fadeIn()函数声明3 个变量：
- 淡入淡出：获取要应用淡入效果的部分。
- opacity:处理获取部分的不透明度。
- intervalID：处理完整逻辑和终止逻辑。
现在不是编写函数引用，而是编写一个完整的函数，每 200 毫秒后会一遍又一遍地调用它以增加不透明度。现在在书面函数，每次调用时将获取部分的不透明度与 1 进行比较
- 如果发现不透明度小于 1，不透明度将增加 0.1 并应用于获取的部分。
- 如果发现 opacity 为 1 或大于 1，则调用 clearInterval()函数以终止函数函数调用。
- 例子：
fade-in effect on page load using JavaScript
GeeksforGeeks
How to create fade-in effect on page load using javascriptThis page will fade-in after loading
- 输出：此输出视频处于循环中，这就是为什么它在获得不透明度 1 后不会停止的原因。它会一次又一次地自动加载。
注意：如果增量值大于 0.1，它会更快地淡入。如果时间间隔减少，那么它也会更快地淡入。