setInterval淡入淡出纯javascript没有jquery或css

JavaScript setInterval 实现淡入淡出效果

基础概念

使用纯JavaScript实现淡入淡出效果，主要通过setInterval定时器逐步改变元素的透明度(opacity)来实现。这种方法不依赖jQuery或CSS动画，完全通过JavaScript控制。

实现原理

使用setInterval创建定时器
在每次定时器触发时，修改元素的style.opacity属性
当达到目标透明度时，清除定时器

代码实现

淡入效果实现

function fadeIn(element, duration = 400) {
    let opacity = 0;
    const interval = 16; // 大约60fps
    const increment = interval / duration;
    
    element.style.opacity = opacity;
    element.style.display = 'block'; // 确保元素可见
    
    const timer = setInterval(function() {
        opacity += increment;
        element.style.opacity = opacity;
        
        if (opacity >= 1) {
            clearInterval(timer);
            element.style.opacity = 1;
        }
    }, interval);
}

淡出效果实现

function fadeOut(element, duration = 400) {
    let opacity = 1;
    const interval = 16; // 大约60fps
    const decrement = interval / duration;
    
    const timer = setInterval(function() {
        opacity -= decrement;
        element.style.opacity = opacity;
        
        if (opacity <= 0) {
            clearInterval(timer);
            element.style.opacity = 0;
            element.style.display = 'none'; // 可选：淡出后隐藏元素
        }
    }, interval);
}

使用示例

<div id="myElement" style="width:100px; height:100px; background:blue; display:none;"></div>
<button onclick="fadeIn(document.getElementById('myElement'))">淡入</button>
<button onclick="fadeOut(document.getElementById('myElement'))">淡出</button>

优势

纯JavaScript实现，不依赖任何库
兼容性好，可以在不支持CSS动画的老旧浏览器中工作
可以精确控制动画的每一步
可以轻松添加回调函数等扩展功能

注意事项

性能不如CSS动画高效，特别是在大量元素动画时
在移动设备上可能不如CSS动画流畅
需要手动处理定时器清理，避免内存泄漏

扩展功能

可以添加回调函数，在动画结束时执行特定操作：

function fadeIn(element, duration = 400, callback) {
    let opacity = 0;
    const interval = 16;
    const increment = interval / duration;
    
    element.style.opacity = opacity;
    element.style.display = 'block';
    
    const timer = setInterval(function() {
        opacity += increment;
        element.style.opacity = opacity;
        
        if (opacity >= 1) {
            clearInterval(timer);
            element.style.opacity = 1;
            if (typeof callback === 'function') {
                callback();
            }
        }
    }, interval);
}