当前位置：首页 > JavaScript

js实现fadein

2026-01-31 15:52:17JavaScript

使用 CSS 和 JavaScript 实现淡入效果

通过结合 CSS 的 opacity 和 transition 属性，配合 JavaScript 动态添加类名，可以实现平滑的淡入效果。

HTML 结构

<div id="fade-element" class="hidden">This element will fade in</div>
<button onclick="fadeIn()">Fade In</button>

CSS 样式

.hidden {
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.visible {
  opacity: 1;
}

JavaScript 代码

function fadeIn() {
  const element = document.getElementById('fade-element');
  element.classList.remove('hidden');
  element.classList.add('visible');
}

纯 JavaScript 实现淡入动画

通过 JavaScript 直接操作元素的 opacity 属性，结合 requestAnimationFrame 实现更精确的控制。

function fadeIn(element, duration = 1000) {
  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);
}

// 使用方式
const element = document.getElementById('fade-element');
fadeIn(element);

使用 jQuery 实现淡入效果

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

$('#fade-element').fadeIn(1000); // 1000 毫秒的淡入时间

淡入完成后执行回调

在淡入动画完成后，可能需要执行某些操作，可以通过以下方式实现回调。

CSS/JavaScript 方法

function fadeIn(element, duration, callback) {
  element.style.transition = `opacity ${duration}ms`;
  element.style.opacity = 1;

  setTimeout(() => {
    if (callback) callback();
  }, duration);
}

纯 JavaScript 动画方法

function fadeIn(element, duration = 1000, callback) {
  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);
    } else if (callback) {
      callback();
    }
  }

  window.requestAnimationFrame(step);
}