js实现fadein

JavaScript 实现淡入效果

通过修改元素的 opacity 属性实现淡入效果，以下是两种常见方法：

方法一：使用 setInterval 逐步增加透明度

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

  const interval = 10;
  const delta = interval / duration;

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

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

方法二：使用 CSS Transition 和 JavaScript 触发

function fadeIn(element, duration) {
  element.style.transition = `opacity ${duration}ms`;
  element.style.opacity = 0;
  element.style.display = 'block';

  setTimeout(() => {
    element.style.opacity = 1;
  }, 10);
}

方法三：使用 requestAnimationFrame 实现平滑动画

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

  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);
}

使用方法示例

const box = document.getElementById('myElement');
fadeIn(box, 1000); // 1秒淡入效果

注意事项

• 确保元素初始状态为 display: none 或 visibility: hidden
• 淡入完成后建议移除内联样式，避免影响后续样式
• 现代浏览器推荐使用 CSS Transition 方法，性能更好