当前位置：首页 > JavaScript

js实现淡入

2026-03-14 06:29:20JavaScript

js实现淡入淡出的方法

使用纯JavaScript实现淡入效果

通过修改元素的opacity属性，结合setInterval或requestAnimationFrame实现逐渐显示的效果：

function fadeIn(element, duration) {
  let opacity = 0;
  const interval = 10;
  const delta = interval / duration;

  const timer = setInterval(function() {
    opacity += delta;
    element.style.opacity = opacity;

    if (opacity >= 1) {
      clearInterval(timer);
    }
  }, interval);
}

使用CSS过渡配合JavaScript

更高效的实现方式是利用CSS过渡特性，只需通过JavaScript触发类名变化：

.fade-in {
  opacity: 1;
  transition: opacity 0.5s ease-in;
}

function fadeIn(element) {
  element.style.opacity = 0;
  element.classList.add('fade-in');
  element.style.opacity = 1;
}

requestAnimationFrame实现

高性能动画推荐使用这个API，能保证与浏览器刷新率同步：

function fadeIn(element, duration) {
  let start = null;
  element.style.opacity = 0;

  function step(timestamp) {
    if (!start) start = timestamp;
    const progress = timestamp - start;
    const opacity = Math.min(progress / duration, 1);
    element.style.opacity = opacity;

    if (progress < duration) {
      window.requestAnimationFrame(step);
    }
  }
  window.requestAnimationFrame(step);
}

带回调函数的版本

可以在动画完成后执行回调函数：

function fadeIn(element, duration, callback) {
  let opacity = 0;
  const interval = 10;
  const delta = interval / duration;

  const timer = setInterval(function() {
    opacity += delta;
    element.style.opacity = opacity;

    if (opacity >= 1) {
      clearInterval(timer);
      if (callback) callback();
    }
  }, interval);
}

注意事项

js实现淡入