通过使用Javascript设置不透明度来淡入元素

Fade in element by setting opacity with Javascript

本文关键字：不透明度 淡入 元素 设置 Javascript      更新时间：2023-09-26

我决定使用香草javascript创建淡入动画效果。

这是我的淡入效果代码：

document.querySelector('.open-1_1').onclick = function() {
    document.getElementById('about-frame').style.display = 'block';     
    for (opacity = 0; opacity < 1.1; opacity = opacity + 0.1) 
    {           
        setTimeout(function(){document.getElementById('about').style.opacity = opacity;},100)                       
    }       
};

我试图做的是通过运行for循环，将#aboutdiv的不透明度从0递增到1，该循环应该为循环的每次迭代等待100毫秒

然而，#aboutdiv在设定时间后从暗变为不透明度1，而没有看到淡入效果。

我的逻辑出了什么问题？

这个for循环没有延迟，它将10个超时设置为在100毫秒内发生。

for (opacity = 0; opacity < 1.1; opacity = opacity + 0.1) 
{           
    setTimeout(function(){document.getElementById('about').style.opacity = opacity;},100)                       
}

所以衰落只需要1毫秒。

另一方面，这在一秒钟内循环MyFadeFunction 10次，这正是您所要求的。

var opacity = 0;
function MyFadeFunction() {
   if (opacity<1) {
      opacity += .1;
      setTimeout(function(){MyFadeFunction()},100);
   }
   document.getElementById('about').style.opacity = opacity;
}

http://jsfiddle.net/dL02zqku/1/

注意本例中的varopacity和MyFadeFunction（）是全局，不嵌套在启动函数中，而是通过函数调用调用。这样，用于调用函数的jquery库就不会处于关闭状态。

我试过Wayne先生的代码，它写得很漂亮，但我试图同时淡化很多东西，我可以看到我的浏览器使用他的代码时速度变慢了。在尝试了几个选项后，我想到了这个：

function fading(){
    var increment = 0.045;
    var opacity = 0;
    var instance = window.setInterval(function() {
        document.getElementById('about').style.opacity = opacity
        opacity = opacity + increment;
        if(opacity > 1){
            window.clearInterval(instance);
        }
    },100)
}
fading();

您可以在jsfiddle上查看：https://jsfiddle.net/b12yqo7v/

main = $('#main');
opacity = 0;
setOpacity(main) {
    if (this.opacity > 1) {
        main.css('opacity', 1);
        return;
    }
    setTimeout(() => {
        opacity += 0.2;
        main.css('opacity', opacity);
        setOpacity(main);
    }, 100);
}

    document.querySelector('.open-1_1').onclick = function () {
    document.getElementById('about-frame').style.display = 'block';
    const about = document.getElementById('about');
    let fade = setInterval(() => {
        about.style.opacity += .02; // 500 milliseconds
        if (about.style.opacity >= 1) {
            clearInterval(fade);
        }
    }, 10); // 100 iterations per second
};
相关文章：