javascript淡出（香草js示例）对我不起作用

在vanilla-js.com上，他们展示了一个淡出的例子

var s = document.getElementById('thing').style;
s.opacity = 1;
(function fade(){(s.opacity-=.1)<0?s.display="none":setTimeout(fade,40)})();

var s=document.getElementById（'thing'）.style；
s、 不透明度=1；
（函数fade（）{（s.opacity-=.1）您可以尝试减小变量并将不透明度设置为该值：

var s = document.getElementById('thing').style;
var o = 1;
(function fade(){
    s.opacity = o-=0.1;
    o < 0 ? s.display="none" : setTimeout(fade,40);
})();

var s=document.getElementById（'thing'）.style；
VarO=1；
（函数fade（）{
s、 不透明度=o-=0.1；
o<0？s.display=“无”：设置超时（淡入淡出，40）；
})();

（s.opacity-=.1）您在哪个浏览器中测试？它在Firefox 21中对我很有效，但是解释该功能的
：

(//this and the bottom closure executes the function inside.
 function fade(){//the function is named fade
  (s.opacity-=.1)//sets the opacity to current opacity-0.1, 
   <0?  // if the opacity - 0.1 is smaller than 0 ('<' = smaller then)
  s.display="none" // set display to none
   : // else
  setTimeout(fade,40) // set a timer of 40 ms and execute the function fade again
 }
)();

（//这个和底部闭包执行内部的函数。
函数fade（）{//函数名为fade
（s.opacity-=.1）//将不透明度设置为当前不透明度-0.1，
这可能已经晚了，但我在这里没有找到原始问题的答案，而且似乎没有人在其他地方解决过这个问题

淡出时，在条件语句中使用0.1作为最小值更安全，如下所示：

(s.opacity-=.1) < .1 

(s.opacity+=.1) > .9 

应在动画结束时实际计算为零，而不是负值（这是此项工作所必需的：

(s.opacity-=.1) < 0 // s.opacity cannot be < 0... 

与

最终代码：

// fade out...
// This way you do not end up with an incomplete fade...

var s = document.getElementById('thing').style;
s.opacity = 1;

(function fade(){
  (s.opacity-=.1)<0.1 ? s.opacity=0 : setTimeout(fade,40) })();

因为

(s.opacity+=.1) 

无法计算为大于1的值。与以前一样，您也可以执行以下操作：

(s.opacity+=.1) >= 1 // but I prefer > .9 ...

最后在动画结束时将s.opacity设置为1

// fade in...

var s = document.getElementById('thing').style;
s.opacity = 0;

(function fade(){ (s.opacity+=.1) > 0.9 ? s.opacity=1 : setTimeout(fade,40) })();

“不会完全褪色”是什么意思？它对我来说很好。你在使用什么浏览器？@bergi它在chrome 28.0.1500.71M版中没有完全消失。它在不透明度处停止：0.100000000000014谢谢，我知道它比比较小，但我对它的使用方式感到困惑。它是在比较当前的s.opacity-.1和0吗？它的意思是否与：
if（s.opacity-.1<0）相同{0:etc？etc}
@user1081577需要记住的一个重要部分是（给定
a=1；b=2；c=3
）
a=b=c
在javascript中是完全有效的，
a=b-=c
也是如此。现在的问题是，在这个例子中，什么是
a
？其实很简单，可以写成
b-=c；a=b
，你也可以做到同样的事情。所以基本上，脚本一次做两个操作。它降低了opac这个检查返回一个三元表达式中使用的布尔值（
cond？ifTrue:ifFalse
）。谢谢你的回答，你还知道为什么它在chrome的最新版本中没有完全淡出吗？在firefox中它工作得很好……我想这是因为放了一个setter（s.display=“none”）在一个速记功能中是错误的。所以prolly new chrome创建了一个错误。但是是的，控制台中没有错误。
s.display="none" 

s.opacity=0

// fade out...
// This way you do not end up with an incomplete fade...

var s = document.getElementById('thing').style;
s.opacity = 1;

(function fade(){
  (s.opacity-=.1)<0.1 ? s.opacity=0 : setTimeout(fade,40) })();

(s.opacity+=.1) > .9 

(s.opacity+=.1) 

(s.opacity+=.1) >= 1 // but I prefer > .9 ...

// fade in...

var s = document.getElementById('thing').style;
s.opacity = 0;

(function fade(){ (s.opacity+=.1) > 0.9 ? s.opacity=1 : setTimeout(fade,40) })();