当前位置：首页 > JavaScript

js实现淡入效果

2026-04-07 10:27:28JavaScript

使用 CSS transition 实现淡入效果

通过添加 CSS 的 transition 属性和 opacity 属性，结合 JavaScript 修改类名实现淡入效果。

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

.hidden {
  opacity: 0;
}

const element = document.getElementById('target');
element.classList.remove('hidden');
element.classList.add('fade-in');

使用 requestAnimationFrame 实现淡入效果

通过 JavaScript 动态修改 opacity 值，利用 requestAnimationFrame 实现平滑动画。

function fadeIn(element, duration = 500) {
  let opacity = 0;
  const step = 16 / duration; // 每帧增加的透明度
  element.style.opacity = opacity;
  element.style.display = 'block';

  function animate() {
    opacity += step;
    if (opacity > 1) {
      opacity = 1;
      element.style.opacity = opacity;
      return;
    }
    element.style.opacity = opacity;
    requestAnimationFrame(animate);
  }

  requestAnimationFrame(animate);
}

fadeIn(document.getElementById('target'));

使用 jQuery 实现淡入效果

如果项目中已引入 jQuery，可以使用其内置的 fadeIn() 方法。

$('#target').fadeIn(500); // 500毫秒的淡入时间

使用 Web Animations API 实现淡入效果

现代浏览器支持的 Web Animations API 提供了更简洁的实现方式。

const element = document.getElementById('target');
element.animate(
  [
    { opacity: 0 },
    { opacity: 1 }
  ],
  {
    duration: 500,
    fill: 'forwards'
  }
);

淡入完成后执行回调函数

为淡入效果添加回调函数，在动画完成后执行特定操作。

js实现淡入效果

function fadeInWithCallback(element, duration, callback) {
  element.style.opacity = 0;
  element.style.display = 'block';

  let opacity = 0;
  const step = 16 / duration;

  function animate() {
    opacity += step;
    if (opacity >= 1) {
      element.style.opacity = 1;
      if (callback) callback();
      return;
    }
    element.style.opacity = opacity;
    requestAnimationFrame(animate);
  }

  requestAnimationFrame(animate);
}

fadeInWithCallback(document.getElementById('target'), 500, () => {
  console.log('淡入动画完成');
});

每种方法适用于不同场景，CSS transition 方法最简单，requestAnimationFrame 提供更精细控制，jQuery 适合已有 jQuery 的项目，Web Animations API 则是现代浏览器的原生解决方案。