2014-03-24 3 views
-1

페이지로드시 div 페이드 인 텍스트를 만들기 위해 javascript를 사용하고 있습니다. 작동하는 것처럼 보이지만 대부분의 경우 텍스트가 페이지로드시 약 0.5 초 동안 처음에 표시되고 사라지고 그 다음에 페이드 인됩니다. body 태그와 body/body 태그 위의 헤더로 javascript를 옮겨 보았습니다. 그것은 항상 동일하게 실행됩니다. 감사. 이러한 CSS를 넣어div 텍스트 페이드 인하는 방법

<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> 
+0

사용하고있는 탐색기? – mrida

답변

4

시도 속성 :

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

어쨌든 0에서 불투명도를 애니메이션 그들을 pageload에서 숨겨진하지 왜 JS와 차단 하시다면 디스플레이를 설정하고 있기 때문에?

1

jQueryfadeIn() 방법을 사용하셨습니까?

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

아니면 자바 스크립트 순수 사용하려는 경우 당신은 거기에서 코드를 당길 수 :

http://youmightnotneedjquery.com/

관련 문제