作者moto778899 (免免)
看板Ajax
标题[问题] 纯js做fade效果的问题
时间Wed Jun 1 17:33:58 2016
最近看到一篇纯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://webptt.com/cn.aspx?n=bbs/Ajax/M.1464773641.A.BF1.html
1F：推 ian90911: 你的问号用法我看的好花@@ 06/01 17:49
2F：推 jmlntw: opacity 是 string 不是 number 不能直接加 06/01 20:39
3F：推 shadowjohn: setTimeout 40 眼睛跟的上? 06/01 23:00
4F：推 shadowjohn: s.opacity=parseFloat(s.opacity)+0.1 改这样看看 06/01 23:06
5F：→ moto778899: 原来如此 所以是因为减法会转型为数字 所以fadeout可 06/01 23:30
谢谢mjm大的提醒
後来照john大说的转型後就可以了
一开始还卡了一下 不work
後来测了一下 不知道为什麽s.opacity一开始的值是空的字串
猜测应该是读取的是行内style而不是样式表吧
於是先初始化了s.opacity = 0; 再运作就可以了
谢谢各位前辈
※ 编辑: moto778899 (59.127.178.68), 06/01/2016 23:45:36
6F：推 s25g5d4: 不过你用 setTimeout 跑起来还是比 jQuery 不顺吧 06/02 07:37
7F：→ s25g5d4: 改用 reqestAnimationFrame 看看 06/02 07:38
8F：推 shadowjohn: 可以研究看看CSS3的动画~ 06/02 07:41
9F：→ rarex: 效能最好的还是css动画了 06/04 16:57
10F：→ moto778899: 是喔！我是照网站上写 贴下网址 大家可以讨论看看 06/08 11:26
11F：→ moto778899: vanilla-js.com 06/08 11:28
12F：→ moto778899: requestAnimationFrame第一次看到 我再研究看看 感谢 06/08 11:30
13F：→ pleasewait: 为何不用animate?? 06/15 10:03
14F：推 pleasewait: 抱歉我喜憨 06/15 10:09