Как добавить эффект затухания в этот код 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