Question

我正在使用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>

Answer 1

尝试使用这些css属性：

#Layer63 {
  opacity: 0;
  display: none;
}

因为您无论如何都要从0设置不透明度动画，并将你的显示设置为阻止js为什么不在页面加载中隐藏它们？

Answer 2

您是否考虑在jQuery中使用 fadeIn() 方法？

$(document).ready(function() {
    $("#Layer63").fadeIn(1000);
});

如果你想使用纯JavaScript，你可以从那里提取代码：

http://youmightnotneedjquery.com/

如何使div文本淡入

2 个答案: