JavaScript setInterval 只运行一次

Question

function smoothTransition(o,n)
{
    o.style.opacity = 0;
    o.src = n;
    var timer = setInterval(function(){
        if (o.style.opacity == 1){
            clearInterval(timer);
        }
        o.style.opacity += 0.01;
    }, 10);
}

这里 o 是对象(在本例中是 img)，n 是将替换当前图像的新图像的名称。但是当我运行这段代码时，它只运行一次并为新图像提供 0.01 不透明度，然后停止。可能是什么原因造成的？

Answer 1

style.opacity 是字符串，不是数字。当您执行 o.style.opacity += 0.1 时，结果实际上是 '00.1'，这是有效的，但在下一次迭代中它变为 00.10.1 ，但不是，因此不透明度重置为 0。

这很容易解决，只需在添加时将 style.opacity 转换为数字即可。

http://jsfiddle.net/TZ9Vd/1/