当前位置：首页 > JavaScript

js 实现fadein

2026-01-31 21:38:09JavaScript

实现 fadeIn 效果的 JavaScript 方法

使用纯 JavaScript 实现元素的淡入效果可以通过修改元素的 opacity 和 display 属性来实现。以下是几种常见的方法：

使用 CSS transition 和 JavaScript 控制

定义一个 CSS 类来控制过渡效果：

.fade-in {
    opacity: 0;
    display: block;
    transition: opacity 0.5s ease-in;
}

.fade-in.show {
    opacity: 1;
}

在 JavaScript 中动态添加类：

function fadeIn(element, duration) {
    element.classList.add('fade-in');
    setTimeout(() => {
        element.classList.add('show');
    }, 10);
}

// 使用示例
const element = document.getElementById('myElement');
fadeIn(element, 500);

使用 requestAnimationFrame 实现动画

通过逐帧修改 opacity 值来实现更精细的控制：

function fadeIn(element, duration) {
    let start = null;
    element.style.display = 'block';
    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('myElement');
fadeIn(element, 500);

使用 setInterval 实现

通过定时器逐步增加透明度：

js 实现fadein

function fadeIn(element, duration) {
    let opacity = 0;
    const interval = 10;
    const delta = interval / duration;
    element.style.display = 'block';
    element.style.opacity = opacity;

    const timer = setInterval(() => {
        opacity += delta;
        element.style.opacity = opacity;
        if (opacity >= 1) clearInterval(timer);
    }, interval);
}

// 使用示例
const element = document.getElementById('myElement');
fadeIn(element, 500);