5

这是我当天第二个与同一问题相关的问题，所以我为此道歉。

我能够组合一个函数来“淡出”一个元素，它工作得很好，我的问题是当我尝试反转它时，元素“淡入”它不起作用。我试图改变显而易见的事情，但我不明白我做错了什么。

到目前为止，我的代码如下：

鉴于我有一个像这样的“div”：

<div id="test" style="width:200px; height:200px; display:block; opacity:1; background-color:red;"></div>

我用来淡出它的 JavaScript 函数是：

var getElement = document.getElementById('test');
function fadeOut(elem, speed){
if(!elem.style.opacity){
    elem.style.opacity = 1;
}
var desvanecer = setInterval(function(){
    elem.style.opacity -= .02;
    if(elem.style.opacity < 0){
        clearInterval(desvanecer);
    }
}, speed / 50);
}
fadeOut(getElement, 500);

有人可以看看这个，让我知道我做错了什么，我想做的就是“淡入”一个不透明度等于“1”的元素。

顺便说一句，我不能使用 jQuery，但是我很想学习这种方式。

谢谢

我尝试反转功能如下：

var getElement = document.getElementById('test');
function fadeIn(elem, speed){
if(elem.style.opacity){
    elem.style.opacity = 0;
}
var desvanecer = setInterval(function(){
    elem.style.opacity += .02;
    if(elem.style.opacity > 1){
        clearInterval(desvanecer);
    }
}, speed / 50); 
}
fadeIn(getElement, 500);
4

1 回答 1

6

setInterval 在全局范围内运行，因此您需要定义相对于窗口的计时器。

您不能连接从样式属性返回的字符串值并期望一个数字 - 您将得到 '0.02.02.02.02'

从字符串中强制转换一个数字，然后添加 .02。

它可以在某些浏览器中工作，但 9 之前的 IE 需要不同的表达式来设置和读取不透明度。

function fadeIn(elem, speed){
    if(elem.style){
        elem.style.opacity= '0';
    }
    window.fadetimer= setInterval(function(){
        elem.style.opacity= +(elem.style.opacity)+.02;
        if(elem.style.opacity> 1){
            clearInterval(fadetimer);
        }
    },
    speed);
}
于 2010-04-23T02:16:55.513 回答