Interval 为什么只执行了一次啊？

[夜丿Night]

<script>
var list = document.getElementById('list');
var first = document.getElementById('first');
var opacity1 = first.style.opacity;
var newOpacity;
function touMingDu1(x){
newOpacity = opacity1 + x;
if(newOpacity > 1){
clearInterval(timer);
}else{
first.style.opacity = newOpacity;
}
}
function play1(){
var timer = setInterval(function(){
touMingDu1(0.1)
},500);
}
play1();
function fun(x){
list.style.top = x*(-600) + 'px';
}
</script>
我想让id为first的div元素透明度从完全透明慢慢渐变成不透明，但是interval却只执行了一次，透明度就变成01就完事了。怎么回事啊？我小白

[天际的海浪]

var list = document.getElementById('list');
var first = document.getElementById('first');
var timer;

function touMingDu1(x) {
	var opacity1 = parseFloat(first.style.opacity);
	var newOpacity = opacity1 + x;
	if (newOpacity > 1) {
		clearInterval(timer);
	} else {
		first.style.opacity = newOpacity;
	}
}

function play1() {
	timer = setInterval(function() {
		touMingDu1(0.1)
	}, 500);
}
play1();

function fun(x) {
	list.style.top = x * (-600) + 'px';
}

[夜丿Night]

换成这样元素一直保持完全透明了。。怎么回事

[夜丿Night]

var opacity1 = parseFloat(first.style.opacity); 我试了试 ，我把这句话parseFloat删掉 透明度从0变到0.1就停止了，执行了一次， 不删就一直保持完全透明，不知道怎么回事。

[夜丿Night]

我用console.debug 给setInterval 计数，发现后台他一直在跑，但是透明度就是加不上，疯了……哪里出毛病了呢，弄一天了。

[天际的海浪]

var opacity1 = parseFloat(first.style.opacity) || 0;

[天际的海浪]

引用 3 楼 qq_37462440 的回复:

var opacity1 = parseFloat(first.style.opacity); 我试了试 ，我把这句话parseFloat删掉 透明度从0变到0.1就停止了，执行了一次， 不删就一直保持完全透明，不知道怎么回事。

因为first.style.opacity取的值是字符串， 字符串在用+号时是拼接字符串的作用。 如， "0.1"+0.1 = "0.10.1"

[木头海上漂]

在变量前加个“+”可以把符合数字的字符串转成number类型

[qq_26964525]

timer 放在了方法内部~~为局部变量