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

作者: moto778899 (免免)   2016-06-01 17:33:58
最近看到一篇純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 就不會再跑了
請問各位前輩
是哪部分我弄錯了?
作者: ian90911 (xopowo)   2016-06-01 17:49:00
你的問號用法我看的好花@@
作者: jmlntw (吉米林)   2016-06-01 20:39:00
opacity 是 string 不是 number 不能直接加
作者: shadowjohn (轉角遇到愛)   2016-06-01 23:00:00
setTimeout 40 眼睛跟的上?s.opacity=parseFloat(s.opacity)+0.1 改這樣看看
作者: moto778899 (免免)   2016-06-01 23:30:00
原來如此 所以是因為減法會轉型為數字 所以fadeout可
作者: s25g5d4 (function(){})()   2016-06-02 07:37:00
不過你用 setTimeout 跑起來還是比 jQuery 不順吧改用 reqestAnimationFrame 看看
作者: shadowjohn (轉角遇到愛)   2016-06-02 07:41:00
可以研究看看CSS3的動畫~
作者: rarex (╰(〒皿〒)╯)   2016-06-04 16:57:00
效能最好的還是css動畫了
作者: moto778899 (免免)   2016-06-08 11:26:00
是喔!我是照網站上寫 貼下網址 大家可以討論看看vanilla-js.comrequestAnimationFrame第一次看到 我再研究看看 感謝
作者: pleasewait (Somebody)   2016-06-15 10:03:00
為何不用animate??抱歉我喜憨

Links booklink

Contact Us: admin [ a t ] ucptt.com