使用原始javascript在500毫秒以上淡入HTML元素

我又一次发现自己被一些我不明白的事情困住了。任何帮助都将不胜感激。 我正在制作一个模态窗口，你点击一些东西，背景被遮罩，模态窗口显示一些内容。 我有一个带有“display:none”和“opacity:0”的div，当用户触发模式时，这个div将覆盖所有内容并具有一定的透明度。 在我看来，我需要做的是： 设置不透明度 执行“for”循环，检查不透明度是否小于所需值。 在此循环内，执行“设置间隔”以逐渐增加不透明度的值，直到达到所需的值。 当达到所需的值时，对“clearInterval”执行“if”语句。 我的代码如下：

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();
}

var showMask=document.getElementById（'mask'）；
函数firemodel（）{
showMask.style.opacity=0；
showMask.style.display='block'；
var getCurrentOpacity=showMask.style.opacity；
var增量不透明度=0.02；
var最终能力=0.7；
var区间增量=20；
var timeLapse=500；
函数fadeIn（）{
对于（var i=getCurrentOpacity；i

正如大家所猜测的，这是不起作用的，它所做的只是将不透明度设置为“1”，而不会逐渐淡入。

---

提前感谢您的帮助。

您应该使用jquery、mootools或extjs来实现类似的功能

但基本上你需要这样做：

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

---

这将在2秒钟内消失。

作为另一位强烈建议使用jQuery的人，请将我的信息收集起来。在我的工作环境中，我经常面临类似的挑战，因为公司老板基本上害怕任何和所有的晋升，所以我理解你的困境。但是，话虽如此，我的建议是，与其花时间重新编写轮子，不如花时间研究如何使用适当的解决方案，在本例中是jQuery或其他javascript框架。如果您可以编写自己的函数，那么就可以使用jQuery

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

文件。填写（“”）；

jQuery是你的朋友。拿出来喝一杯，看看你能不能继续。我知道，我实际上经常使用它，不幸的是，我不能将它用于这个函数，我很惭愧地承认我对原始javascript不太熟悉。因此，这是一个病态的案例，jQuery是问题的一部分，而不是解决方案的一部分。：）谢谢，我试试这个。不幸的是，我不能使用jQuery（长话短说），而且它给了我学习更多原始javascript的机会。请注意，id必须是全局的，否则间隔回调将找不到它。我没有收到任何错误，但行为是相同的，它不会立即将不透明度更改为“0.05”，而不是在一段时间内。我会用这些做更多的实验，这样我就能得到正确的结果，我只是想确保我的思维过程是正确的。它应该每1/5秒增加一次不透明度。05我确定它一定是我，它会在1/5秒后将不透明度更改为“0.05”，但它只执行一次，然后停止。我相信你的解决方案一定有效，所以我会用它让你知道。我听到了你说的话，相信我，我同意你的看法。实际上，我已经使用jQuery编写了这个函数，但我意识到我们正在开发的应用程序正在使用jQuery 1.1.1，我们无法升级。我更喜欢编写简单的JavaScript，而不是使用旧的（非常旧的）jQuery版本。请升级您的jQuery。如果你有1.1.1版，你肯定可以升级它。作为一个U.I.E.我强烈鼓励您推动您的公司/公司/客户/独裁升级并使用有用的、用户友好的、维护良好的工具，以帮助推广一个标准化良好的网站。作为开发人员，我们的工作是保护web并鼓励良好实践。做正确的事要付出代价！卡尔文，我同意你的看法，我已经告诉他们，为了发展的效率和速度，我们应该升级。我们将在大约三个月内完成这项工作，届时应用程序的其余部分将准备迁移到新平台。我想这将是一个漫长的等待。