Question

我遇到了setInterval函数问题。它只执行一次。

function show(el){
    el.style.opacity = 0;
    el.style.display = "block";
    showingInterval = window.setInterval(function() {
            el.style.opacity += 0.001;
            if(el.style.opacity == 1) {
                alert("done");
                clearInterval(showingInterval);
            }
        }, 1);
}

函数show(el)不是问题。它将不透明度更改为0并显示为"block"就好了。 interval函数运行一次，将元素的不透明度更改为0.0001。但它仍处于该状态，并且不再发生变化。

感谢您的帮助！

Answer 1

第一个问题，Element.node.style不可靠。要检查当前状态和值，请始终使用window.getComputedStyle( Node )。

第二个问题，css属性在 Strings 中表示，你不能使用像+=这样的数学运算符。

el.style.opacity = parseFloat( getComputedStyle( el ).opacity ) + 0.001;

Answer 2

这里的问题是你的+=不是数学求和运算而是字符串连接。发生这种情况是因为如果至少有一个操作数是字符串类型，则一元+运算符执行字符串连接。 DOMElement.style属性的值始终是字符串，因此在您的情况下，递增的不透明度值如下所示：

"0" + 0.001 // => "00.001"

当您将此值应用为新的opacity浏览器时，因为格式无效，请再次将其设置为“0”。

您需要的只是将el.style.opacity转换为数字类型。例如，使用Number函数：

el.style.opacity = Number(el.style.opacity) + 0.01;

演示： http://jsfiddle.net/gvg31gd1/

Answer 3

这里的解决方案需要声明一个变量

你的代码不是icreamenet opacity值，这就是为什么我不工作

var opacity = 0;
function show(el){
el.style.opacity = 0;
el.style.display = "block";
showingInterval = window.setInterval(function() {
       opacity = opacity + 0.001;
        el.style.opacity = opacity;
        document.write(opacity)
        if(el.style.opacity == 1) {
            alert("done");
            clearInterval(showingInterval);
        }
    }, 1);

}

setInterval只执行一次

3 个答案: