javascript - 如何向此 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