[問題] 純js做fade效果的問題

[moto778899 (免免)]

最近看到一篇純js和框架於執行上效率差異的文章

其中例舉一個為js做fadeout的效果
和jQuery做fadeout效果

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

jQuery:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$('#thing').fadeOut();
</script>

於是我就試了一下純js的部分OK
想說逆向來一下fadein效果
於是寫了承上的宣告(s)

先把s改回block
s.display = 'block';

在做fadeIn
(function fadeInx(){(s.opacity+=.1)>1?s.opacity=1:setTimeout(fadeInx,40)})()

但卻只會讓s.opacity停在0.1 就不會再跑了
請問各位前輩
是哪部分我弄錯了?

--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 59.127.178.68
※ 文章網址: https://www.ptt.cc/bbs/Ajax/M.1464773641.A.BF1.html
推 ian90911: 你的問號用法我看的好花@@
推 jmlntw: opacity 是 string 不是 number 不能直接加
推 shadowjohn: setTimeout 40 眼睛跟的上?
推 shadowjohn: s.opacity=parseFloat(s.opacity)+0.1   改這樣看看
→ moto778899: 原來如此 所以是因為減法會轉型為數字 所以fadeout可
謝謝mjm大的提醒
後來照john大說的轉型後就可以了
一開始還卡了一下 不work
後來測了一下 不知道為什麼s.opacity一開始的值是空的字串
猜測應該是讀取的是行內style而不是樣式表吧
於是先初始化了s.opacity = 0; 再運作就可以了
謝謝各位前輩
※ 編輯: moto778899 (59.127.178.68), 06/01/2016 23:45:36
推 s25g5d4: 不過你用 setTimeout 跑起來還是比 jQuery 不順吧
→ s25g5d4: 改用 reqestAnimationFrame 看看
推 shadowjohn: 可以研究看看CSS3的動畫~
→ rarex: 效能最好的還是css動畫了
→ moto778899: 是喔！我是照網站上寫 貼下網址 大家可以討論看看
→ moto778899: vanilla-js.com
→ moto778899: requestAnimationFrame第一次看到 我再研究看看 感謝
→ pleasewait: 為何不用animate??
推 pleasewait: 抱歉我喜憨