淡入图像javascript

我是JavaScript方面的新手，我正在尝试编写一个代码，该代码会在我熟悉的命令中淡出画面。我在这里看到了几个例子，但都不起作用。这就是我试图做的：

函数myFunction（）{
对于（i=1；i<20；i++）{
setTimeout（函数（）{
o=1-1/i
}，200）；//这将增加不透明度
document.getElementById（“dog”）.style.opacity=o
}
}

img{
不透明度：0；
过滤器：α（不透明度=40）；
}

Lets Rock

您可能会发现使用CSS控制不透明度更容易。它对浏览器的工作更少，只需要很少的javascript来切换类

var img=document.getElementById（“dog”），
btn=document.getElementById（“按钮”）；
btn.addEventListener（“单击”），函数（事件）{
img.className=（img.className===“in”）？“out”：“in”；
}，假）
#狗{
不透明度：0；
-webkit过渡：轻松；
-moz转换：不透明度2秒；
-ms转换：不透明度降低；
-o-转变：不透明度；
过渡期：不透明度和易用性；
}
#狗食{
不透明度：1；
}
让我们摇滚

试试这个：


功能fadeIn（el）{
el.style.opacity=0；
var tick=函数（）{
el.style.opacity=+el.style.opacity+0.01；
如果（+el.style.opacity<1）{
（window.requestAnimationFrame&&requestAnimationFrame（勾号））| |设置超时（勾号，16）
}
};
勾选（）；
}
函数myFunction（）{
var el=document.getElementById（“dog”）；
控制台日志（el）；
法代因（el）；
}
img{
不透明度：0；
过滤器：α（不透明度=40）；
}
让我们摇滚吧
这个例子有多古老？您不应该使用
标记，它是不推荐的。这可能会有所帮助：所有超时都是在同一时间触发的，也就是在声明超时后的
100
毫秒。Try:
setTimeout（函数（）{o=1-1/i}，100*i）
和dd timeout函数中的不透明部分。非常感谢您的帮助@cale_b可能的重复，尽管我同意我仍然投票，因为这是人们应该追求的正确解决方案。我同意OP要求使用JS。@cale_b指出，尽管学习javascript的一部分是知道何时不使用它；）@这里有些东西——虽然你们都是对的，而且我承认这是一个更简单/更好的解决方案，但这种逻辑也意味着这个问题对于jQuery或其他框架解决方案来说是公平的，是吗？我想我的观点是——让我们以他们提问的方式回答问题，或者（在评论中）告诉他们有更好的方法。OP可能只是为了学习如何做事而提出问题，而不仅仅是为了获得结果。（如果没有其他理由认识到使用jQuery或CSS3的价值，那么用普通javascript编写您自己的“淡入”是有价值的）请注意，您的SO代码片段只需要向下滚动即可。也许可以用图像位置切换按钮？为了清楚起见。否则+1@somethinghere
按钮
单击snippet中的not get trigger，但在JSFIDLE中可以完美地工作。有什么想法吗？