通过使用 Javascript 设置不透明度来淡入元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25682379/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Fade in element by setting opacity with Javascript
提问by ocajian
I have decided to create a fade in animation effect using vanilla javascript.
我决定使用 vanilla javascript 创建淡入淡出的动画效果。
This is the code for my fade in effect:
这是我的淡入效果代码：
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)
}
};
What I am trying to do is incrementally increasing the opacity of the #about div from 0 to 1 by running through a for loop which is supposed to wait 100 miliseconds for every iteration of the loop
我想要做的是通过运行 for 循环逐渐增加 #about div 的不透明度从 0 到 1，该循环应该为循环的每次迭代等待 100 毫秒
However the #about div goes from dark to opacity 1 after a set time without seeing the fade in effect.
然而，#about div 在一段时间后从黑暗变为不透明度 1，而没有看到淡入效果。
What is wrong with my logic?
我的逻辑有什么问题？
回答by Wayne
This for loop is not on a delay, it sets ten timeouts to take place in 100 miliseconds.
这个 for 循环没有延迟，它设置了 100 毫秒内发生的十次超时。
for (opacity = 0; opacity < 1.1; opacity = opacity + 0.1)
{
setTimeout(function(){document.getElementById('about').style.opacity = opacity;},100)
}
So the fade only takes 1 ms.
所以淡入淡出只需要 1 毫秒。
This on the other hand loops the MyFadeFunction 10 times over a one second period, which is what you are asking for.
另一方面，这在一秒钟内循环 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/
http://jsfiddle.net/dL02zqku/1/
Notevar opacityin this example and MyFadeFunction()are global, not nested within the startup function, but called via a function call. This is so that the jquery library being used to call the function is not held in a closure state.
注意这个例子中的var opacity和MyFadeFunction()是 global，不是嵌套在启动函数中，而是通过函数调用调用。这是为了使用于调用该函数的 jquery 库不会处于关闭状态。
回答by Ashvin Pal
I tried Mr.Wayne's code, it's beautifully written, but I was trying to fade a lot of things at the same time and I could see my browser slowing down using his code. After trying a few options I came up with this:
我尝试了 Mr.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();
You can check it out here on jsfiddle : https://jsfiddle.net/b12yqo7v/
您可以在 jsfiddle 上查看：https://jsfiddle.net/b12yqo7v/
回答by Trung
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);
}
