이 자바 스크립트 코드에 페이딩 효과를 추가하는 방법

Question

<div id="changeText" ></div> 
<script type="text/javascript"> 
var text = ["Welcome", "Hi", "Sup dude"]; 
var counter = 0; 
var elem = document.getElementById("changeText"); 
setInterval(change, 1000); 
function change() { 
elem.innerHTML = text[counter]; 
    counter++; 
    if(counter >= text.length) { counter = 0; } 
} 
</script> 

이 자바 스크립트 코드에 페이딩 효과를 어떻게 추가합니까? 또한 빈칸 대신 "환영"으로 시작하는 방법은 무엇입니까? 나는 당신의 도움에 매우 감사 할 것입니다.

Answer 1

당신이 JQuery와

var text = ["Welcome", "Hi", "Sup dude"]; 
var counter = 0; 
var elem = document.getElementById("changeText"); 
elem.style.opacity = 0; 
var opCounter = 0; 
setInterval(change, 3000); 
function change() { 
elem.innerHTML = text[counter]; 
    setInterval(opChange, 300); 
    counter++; 
    if(counter >= text.length) { counter = 0; } 
    elem.style.opacity = 0; 
    opCounter = 0; 
} 
function opChange(){ 
     elem.style.opacity = opCounter; 
    opCounter = opCounter + 0.1; 
} 

더 페이드 아웃 효과가 없습니다 jsfiddle