最近看到一篇纯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第一次看到 我再研究看看 感谢