Question

编写一些脚本来提供输入文字的效果，但我想让每个角色都淡入。我尝试添加x.style.opacity并通过Id获取元素但是这会改变整个事情是否有任何方法可以针对个人字符？这是我的代码：

var i = -1; 
var string = "BREAKING NEWS "
var array = string.split("");   


function Next(){
i++;   
if(i > (array.length - 1)){      
    i = 0;                            
}
setTimeout('Slide()',50);
 }


 function Slide(){
x = document.getElementById('test')
x.innerHTML += array[i];

setTimeout('Next()',50);

}

Answer 1

您无法将单个字符定位到标记中，例如span：

DEMO

function Slide() {
    var sp = document.createElement('span');
    sp.setAttribute('class', 'fadein');
    sp.appendChild(document.createTextNode(array[i]));
    x.appendChild(sp);
    setTimeout('Next()', 50);
}

你可以使用css动画为它们设置动画

.fadein {
    animation: fadein 2s;
}
@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

如何在javascript中为打字文本效果设置动画

1 个答案: