자바 DOM 서서히 혼탁

Question

function fade() 
{ 

    var i = 0; 
    var h1 = document.getElementsByTagName("h1")[0]; 
    h1.style.opacity = 0; 
    var k = window.setInterval(function() 
    { 
     if(i >= 10) 
      clearInterval(k); 
     else 
     { 
      h1.style.opacity += i/10; 
      i++; 
     } 
    }  

      , 10); 


}; 

이는 내 기능, 애니메이션 페이드 효과를 만들고, 서서히 H1 태그의 불투명도를 증가 해야하는된다 변경하지만 (불투명도가 0.1 일 때)는 제 1 루프 후 멈춘다.

이 기능은 내 몸 태그 내에서 onload라고합니다. 가 불투명도에 대한 계산 결과를 추가하려면 원하지 않는

Answer 1

, 당신은 그것을 설정하려면 :

h1.style.opacity = i/10; 

당신은 또한 간격을 약간 느리게 할 수 있습니다. 그래도 YMMV.

여기에 전체 코드입니다 :

function fade() { 
 
    var i = 0; 
 
    var h1 = document.getElementsByTagName("h1")[0]; 
 
    h1.style.opacity = 0; 
 
    var k = window.setInterval(function() { 
 
    if (i >= 10) { 
 
     clearInterval(k); 
 
    } else { 
 
     h1.style.opacity = i/10; 
 
     i++; 
 
    } 
 
    }, 100); 
 
}; 
 
fade()

<h1> 
 
    My heading 
 
</h1>