通过使用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循环没有延迟,它设置十个超时发生在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库不会保持在闭包状态.