[問題] 純js做fade效果的問題

看板Ajax作者 (免免)時間8年前 (2016/06/01 17:34), 8年前編輯推噓7(7推 0噓 7→)
留言14則, 7人參與, 最新討論串1/1
最近看到一篇純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://www.ptt.cc/bbs/Ajax/M.1464773641.A.BF1.html
推
06/01 17:49, , 1F
你的問號用法我看的好花@@
06/01 17:49, 1F
推
06/01 20:39, , 2F
opacity 是 string 不是 number 不能直接加
06/01 20:39, 2F
推
06/01 23:00, , 3F
setTimeout 40 眼睛跟的上?
06/01 23:00, 3F
推
06/01 23:06, , 4F
s.opacity=parseFloat(s.opacity)+0.1 改這樣看看
06/01 23:06, 4F
→
06/01 23:30, , 5F
原來如此 所以是因為減法會轉型為數字 所以fadeout可
06/01 23:30, 5F
謝謝mjm大的提醒 後來照john大說的轉型後就可以了 一開始還卡了一下 不work 後來測了一下 不知道為什麼s.opacity一開始的值是空的字串 猜測應該是讀取的是行內style而不是樣式表吧 於是先初始化了s.opacity = 0; 再運作就可以了 謝謝各位前輩 ※ 編輯: moto778899 (59.127.178.68), 06/01/2016 23:45:36
推
06/02 07:37, , 6F
不過你用 setTimeout 跑起來還是比 jQuery 不順吧
06/02 07:37, 6F
→
06/02 07:38, , 7F
改用 reqestAnimationFrame 看看
06/02 07:38, 7F
推
06/02 07:41, , 8F
可以研究看看CSS3的動畫~
06/02 07:41, 8F
→
06/04 16:57, , 9F
效能最好的還是css動畫了
06/04 16:57, 9F
→
06/08 11:26, , 10F
是喔！我是照網站上寫 貼下網址 大家可以討論看看
06/08 11:26, 10F
→
06/08 11:28, , 11F
vanilla-js.com
06/08 11:28, 11F
→
06/08 11:30, , 12F
requestAnimationFrame第一次看到 我再研究看看 感謝
06/08 11:30, 12F
→
06/15 10:03, , 13F
為何不用animate??
06/15 10:03, 13F
推
06/15 10:09, , 14F
抱歉我喜憨
06/15 10:09, 14F
‣ 更多 moto778899 的文章
文章代碼(AID): #1NJgm9ln (Ajax)