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

如何为此javascript代码添加淡入淡出效果

1 个答案: