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/