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

Question

我决定使用 vanilla 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 循环逐渐将 #about div 的不透明度从 0 增加到 1，该循环应该在循环的每次迭代中等待 100 毫秒

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

我的逻辑有什么问题？

Answer 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/

注意 var opacity 在这个例子中和 MyFadeFunction() 是全局的 ，不嵌套在启动函数中，而是通过函数调用调用。这样一来，用于调用该函数的 jquery 库就不会处于关闭状态。