javascript - 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/