如何在此javascript代碼中添加淡化效果

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> 

如何向此javascript代碼添加淡化效果？另外，我如何讓它以「歡迎」而不是空白開頭？我非常感謝你的幫助。

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