1

我又一次发现自己被一些我不理解的东西困住了。任何帮助，将不胜感激。我正在使用模态窗口，您单击某些东西，背景被遮盖，模态窗口显示一些内容。我有一个带有“display:none”和“opacity:0”的 div，当用户触发模态框时，这个 div 将覆盖所有内容并对其具有一定的透明度。在我看来，我需要做的是： 设置不透明度 执行“for”循环，检查不透明度是否小于所需值。在此循环中，执行“setInterval”以逐渐增加不透明度的值，直到达到所需的值。当达到所需值时，对“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();
}

正如你们都可以猜到的，这不起作用，它所做的只是将不透明度设置为“1”而不会逐渐淡入。在此先感谢您的帮助。

4

2 回答 2

2

你应该使用 jquery、mootools 或 extjs 来做这样的事情。

但基本上你需要这样做：

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

这将在 2 秒内消失。

于 2010-04-22T18:34:38.733 回答
0

让我成为另一个强烈建议使用 jQuery 的人。在我的工作环境中，我经常面临类似的挑战，因为公司老板基本上害怕任何和所有的进步，所以我理解你的困境。但是，话虽如此，我的建议不是花时间重写轮子，而是花时间弄清楚如何使用正确的解决方案，在这种情况下是 jQuery 或其他 javascript 框架。如果您可以编写自己的函数，则可以使用 jQuery。

<script>
  document.write("<scr" + "ipt src='http://givemejquery'></scr" + "ipt>");
</script>
于 2010-04-22T19:08:16.897 回答