[問題] 純js做fade效果的問題
最近看到一篇純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
06/01 20:39, 2F
推
06/01 23:00, , 3F
06/01 23:00, 3F
推
06/01 23:06, , 4F
06/01 23:06, 4F
→
06/01 23:30, , 5F
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
06/02 07:37, 6F
→
06/02 07:38, , 7F
06/02 07:38, 7F
推
06/02 07:41, , 8F
06/02 07:41, 8F
→
06/04 16:57, , 9F
06/04 16:57, 9F
→
06/08 11:26, , 10F
06/08 11:26, 10F
→
06/08 11:28, , 11F
06/08 11:28, 11F
→
06/08 11:30, , 12F
06/08 11:30, 12F
→
06/15 10:03, , 13F
06/15 10:03, 13F
推
06/15 10:09, , 14F
06/15 10:09, 14F
Ajax 近期熱門文章
PTT數位生活區 即時熱門文章
