如何使div文本淡入

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的不透明度设置为动画，并将ur display设置为使用js进行阻止，为什么不在页面加载时隐藏它们？

Answer 2

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

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

或者，如果您想使用纯JavaScript，则可以从此处提取代码：

http://youmightnotneedjquery.com/

如何使div文本淡入

问题描述

2 个解决方案

解决方案1
4 已采纳 2014-03-24 15:56:12

解决方案2
1 2014-03-24 15:56:56

如何使div文本淡入

问题描述

2 个解决方案

解决方案1 4 已采纳 2014-03-24 15:56:12

解决方案2 1 2014-03-24 15:56:56

解决方案1
4 已采纳 2014-03-24 15:56:12

解决方案2
1 2014-03-24 15:56:56