如何使div文本淡入
[英]How to make div text fade in
問題描述
我正在使用javascript使div內的文本在頁面加載時淡入。 這似乎是工作，但大部分時間文本最初顯示在頁面加載約半秒鍾，像它應該消失，然后變淡。 我試過將javascript移至標頭，body標記上方和/ body標記下方。 它始終運行相同。 謝謝。
<body onload="javascript:ShowDiv('Layer63');">
<div id="Layer63" class="style1z">
<span class="style16">“Line 1 of fade in text"<br />
“Line 2 of fade in text"</span><br />
-<span class="style12">“Line 3 of fade in text"</span></div>
</body>
<script>
function ShowDiv(name){
//duration of transition (1000 miliseconds equals 1 second)
var duration = 1500;
// how many times should it should be changed in delay duration
var AmountOfActions=30;
var diiv= document.getElementById(name);
diiv.style.opacity = '0'; diiv.style.display = 'block'; var counte=0;
setInterval(function(){counte ++;
if ( counte<AmountOfActions) { diiv.style.opacity = counte/AmountOfActions;}
},
duration / AmountOfActions);
}
</script>
2 個解決方案
解決方案1
4 已采納 2014-03-24 15:56:12
嘗試放置以下CSS屬性：
#Layer63 {
opacity: 0;
display: none;
}
由於您無論如何都將0的不透明度設置為動畫，並將ur display設置為使用js進行阻止，為什么不在頁面加載時隱藏它們？
解決方案2
1 2014-03-24 15:56:56
您是否考慮過在jQuery中使用fadeIn()方法？
$(document).ready(function() {
$("#Layer63").fadeIn(1000);
});
或者，如果您想使用純JavaScript，則可以從此處提取代碼：
如何使向下滾動頁面上每個 div 的文本淡入 animation？
[英]How do I make a text fade in animation for each div on scroll down page?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.