如何向此JavaScript代码添加淡入淡出效果

How to add fading effect to this javascript code

本文关键字：淡入 淡出 添加 代码 JavaScript      更新时间：2023-09-26
 <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 代码中添加淡入淡出效果？ 另外，如何使其以"欢迎"而不是空格开头？我将非常感谢您的帮助。

如果你不想添加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

相关文章：