我决定使用香草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，而没有看到渐变效果。
我的逻辑有什么问题？
此for循环没有延迟，它将10个超时设置为在100毫秒内发生。
for (opacity = 0; opacity < 1.1; opacity = opacity + 0.1)
{
setTimeout(function(){document.getElementById('about').style.opacity = opacity;},100)
}
因此淡入仅需1 ms。
另一方面，这是在您要求的一秒钟内将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库不会保持在关闭状态。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句