我使用的功能

Question

lu.style.opacity = lu.style.opacity += 0.01;
这是我的非jquery淡入功能的一部分，我希望有一个fadeIn功能而不是jquery。我正在对函数发出警告，看看不透明度是多少，每次都是0.01，那为什么它只是一次添加呢？

我使用的功能

function fadein(lu,time){
if (lu.style.opacity<1)
  {
    lu.style.opacity = parseFloat(lu.style.opacity, 10) + 0.01; //add 0.01 to the opacity
    setTimeout(function(){fadein(lu,time)},time/100) //sets a timeout to the fadeIn function every time/100 miliseconds
  } 
}

Answer 1

不透明度是一个字符串。添加时，您正在进行字符串连接。

console.log(typeof lu.style.opacity);
// "string"

确保您要添加数字：

lu.style.opacity = parseFloat(lu.style.opacity) + 0.01;

如果parseFloat返回NaN，这可能会有所帮助：

lu.style.opacity = (parseFloat(lu.style.opacity) || 0) + 0.01;

现在你没有看到价值变化的原因是：

lu.style.opacity;
// originally empty string: ''
lu.style.opacity += 0.01
// translates to: lu.style.opacity = '' + 0.01
// which equals '0.01' which is valid, but when you do it again:
lu.style.opacity += 0.01
// it is doing this: lu.style.opacity = '0.01' + 0.01
// which is: '0.010.01'
// which is an invalid value for that css style so it retains the previous value of '0.01'

Answer 2

不透明度是一个字符串。
语法错误（即+ =）。

lu.style.opacity = parseFloat（lu.style.opacity）+ 0.01;

Answer 3

我认为你没有正确加入

lu.style.opacity = parseFloat(lu.style.opacity) + 0.01;

正如@Pointy评论的那样，在添加之前和添加之后尝试发出警报。

Answer 4

我认为你的意思是

lu.style.opacity += 0.01;

或

lu.style.opacity = lu.style.opacity + 0.01;

Answer 5

将其丢入while循环，以监控您向目标不透明度的进展：

var TARGET_OPACITY = 60.0;
while(lu.style.opacity < TARGET_OPACITY) {
    lu.style.opacity = parseFloat(lu.style.opacity, 10) + 0.01;
}

在javascript中添加不透明度无法正常工作

我使用的功能

5 个答案: