[问题] 纯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