一个简单的js渐显(fadeIn)渐隐(fadeOut)类

下面是详细讲解“一个简单的js渐显(fadeIn)渐隐(fadeOut)类”的完整攻略：

一、编写fadeIn和fadeOut函数

首先我们需要编写两个函数，用于实现渐显和渐隐效果。代码如下：

class Fade {
  static fadeIn(el, time = 1000) {
    el.style.opacity = 0;
    el.style.display = "block";
    let start = performance.now();

    let animation = requestAnimationFrame(function animate() {
      let timeFraction = (performance.now() - start) / time;
      if (timeFraction > 1) {
        timeFraction = 1;
      }

      el.style.opacity = timeFraction;
      if (timeFraction < 1) {
        requestAnimationFrame(animate);
      }
    });
  }

  static fadeOut(el, time = 1000) {
    el.style.opacity = 1;
    let start = performance.now();

    let animation = requestAnimationFrame(function animate() {
      let timeFraction = (performance.now() - start) / time;
      if (timeFraction > 1) {
        timeFraction = 1;
        el.style.display = "none";
      }

      el.style.opacity = 1 - timeFraction;
      if (timeFraction < 1) {
        requestAnimationFrame(animate);
      }
    });
  }
}

代码中，我们定义了一个Fade类，包含了两个静态方法fadeIn和fadeOut。这两个方法都接受两个参数，第一个参数是要实现动画效果的元素，第二个参数是动画持续的时间，单位是毫秒。

在fadeIn函数中，我们首先将元素的透明度设置为0，然后将元素的显示方式设置为block。接着使用requestAnimationFrame函数实现动画，计算当前时间占总时间的比例（即抽象出来的时间轴上的比例），并将透明度设置为比例值。最后判断比例值是否小于1，如果小于1则继续递归调用requestAnimationFrame函数实现下一帧动画，直到比例值等于1。

在fadeOut函数中，我们需要先将元素的透明度设置为1，然后和fadeIn函数一样计算比例值并设置元素的透明度值。在比例值等于1时，将元素的显示方式设置为none，隐藏元素。

二、示例说明

下面我们假设有一个按钮和一个<div>元素，按钮的点击事件会触发<div>元素的渐显和渐隐效果。

1. 示例一

在HTML代码中添加以下内容：

<button onclick="Fade.fadeIn(document.getElementById('box'), 2000)">Fade In</button>
<button onclick="Fade.fadeOut(document.getElementById('box'), 2000)">Fade Out</button>
<div id="box">Hello World!</div>

代码中，我们在按钮的onclick事件中调用Fade类的fadeIn和fadeOut方法，传入要实现渐显和渐隐效果的<div>元素。

2. 示例二

如果你使用jQuery，可以使用以下代码实现渐隐和渐显效果：

$("#box").fadeIn(2000);
$("#box").fadeOut(2000);

其中，fadeIn()和fadeOut()函数分别实现了渐显和渐隐的动画效果，传入的参数为动画的持续时间，单位为毫秒。

三、总结

通过以上的例子，我们可以看到，使用JavaScript实现渐显和渐隐效果并不难，只要掌握了基本的动画原理，就可以自己编写出类似的函数。对于需要频繁实现渐变效果的网站来说，这是一个非常有用的技巧。