作者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/m.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