最近看到一篇純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:00opacity 是 string 不是 number 不能直接加
setTimeout 40 眼睛跟的上?s.opacity=parseFloat(s.opacity)+0.1 改這樣看看
原來如此 所以是因為減法會轉型為數字 所以fadeout可
作者:
s25g5d4 (function(){})()
2016-06-02 07:37:00不過你用 setTimeout 跑起來還是比 jQuery 不順吧改用 reqestAnimationFrame 看看
作者: rarex (╰(〒皿〒)╯) 2016-06-04 16:57:00
效能最好的還是css動畫了
是喔！我是照網站上寫 貼下網址 大家可以討論看看vanilla-js.comrequestAnimationFrame第一次看到 我再研究看看 感謝