在超过500毫秒的原始javascript中淡入HTML元素

再一次，我发现自己被某些我不明白的东西卡住了。任何帮助，将不胜感激。我正在模态窗口上工作，你点击了一些东西，背景被蒙上了阴影，模态窗口显示了一些内容。我有一个“display：none”和“opacity：0”的div，当用户触发模式时，这个div将覆盖所有内容并对它有一定的透明度。在我看来，我需要做的是：设置不透明度执行一个“for”循环来检查不透明度是否小于所需值。在这个循环中，执行一个“setInterval”逐渐增加不透明度的值，直到达到所需的值。达到所需值后，执行“if”语句以“clearInterval”。到目前为止我的代码如下：。在超过500毫秒的原始javascript中淡入HTML元素

var showMask = document.getElementById('mask'); 
function fireModal(){ 
showMask.style.opacity = 0; 
showMask.style.display = 'block'; 
var getCurrentOpacity = showMask.style.opacity; 
var increaseOpacity = 0.02; 
var finalOpacity = 0.7; 
var intervalIncrement = 20; 
var timeLapse = 500; 
function fadeIn(){ 
    for(var i = getCurrentOpacity; i < finalOpacity; i++){ 
     setInterval(function(){ 
      showMask.style.opacity = i; 
     }, intervalIncrement)  
    } 
    if(getCurrentOpacity == finalOpacity){ 
     clearInterval(); 
    } 
} 
fadeIn(); 
}

大家都可以猜到，这是行不通的，它是所有没有在逐渐淡化它提前设置不透明度为“1” 谢谢您帮帮我。

来源

2010-04-22 jnkrois

为什么jQuery不是一个选项？ – 2010-04-22 18:30:32

jQuery是你的朋友。把它拿出来喝，看看你是否继续。 – 2010-04-22 18:36:24

我知道，我真的使用它很多，不幸的是不能用它来实现这个功能，我很惭愧地承认我对原始javascript不太熟悉。 – jnkrois 2010-04-22 18:44:31

你应该使用jquery，mootools或extjs这样的东西。

但基本上你需要做的是：

var id = setInterval(function() { 
    showMask.style.opacity += .05; 
    if (showMask.style.opacity >= 1) 
    { 
     clearInterval(id); 
    } 
},200)

这将淡入超过2秒。

来源

2010-04-22 18:34:38

谢谢，我会试试这个。不幸的是我不能使用jQuery（长篇故事），除此之外，它让我有机会学习更多的原始JavaScript。 – jnkrois 2010-04-22 18:37:27

请注意，id将需要全局或间隔回调不会找到它。 – 2010-04-22 18:39:31

我没有得到任何错误，但行为是相同的，不是它立即将不透明度改变为“0.05”，而是在时间流逝中改变。我会试试这些更多的东西，这样我就可以做对了，我只是想确保我的思维过程是正确的。 – jnkrois 2010-04-22 19:01:54

把我当作另一个强烈建议使用jQuery的人。在我的工作环境中，我经常面临类似的挑战，因为企业老板基本上都害怕任何进步，所以我理解你的困境。但是，这是说，我的建议是花时间重写轮子，花时间弄清楚如何使用适当的解决方案，在这种情况下，这是jQuery或其他JavaScript框架。如果你可以编写你自己的函数，你可以使用jQuery。

<script> 
    document.write("<scr" + "ipt src='http://givemejquery'></scr" + "ipt>"); 
</script>

来源

2010-04-22 19:08:16

我听到你在说什么，并相信我，我同意你的意见。我实际上已经使用jQuery编写函数，只是意识到我们正在开发的应用程序使用jQuery 1.1.1，并且我们无法升级。我宁愿编写普通的JavaScript，而不愿使用旧的（非常旧的）jQuery版本。 – jnkrois 2010-04-22 19:20:49

请升级你的jQuery。如果你有版本1.1.1，你肯定可以升级它。作为U.I.E.我强烈建议你推动你的公司/公司/客户/独裁者进行升级并使用有用的，用户友好的，维护良好的工具，以帮助推广标准化良好的网站。开发者保护网络和鼓励良好实践是我们的工作。做什么是正确的！ – Calvin 2010-04-22 19:54:21

我同意你的说法，我已经告诉他们为了效率和发展的速度，我们应该升级。我们将在大约三个月内完成其余应用程序准备迁移到新平台。猜猜这将是一个漫长的等待。 – jnkrois 2010-04-22 20:07:29

在超过500毫秒的原始javascript中淡入HTML元素

回答

相关问题