动画javascript/jquery中逐字淡入淡出

Question

我正在寻找一种方式来展示这部动画，但每个单词和换行之间的持续时间不同(你可以在YouTube视频中看到(

https://youtu.be/KwELYWNpMyE

我也采取了一些进一步的措施，但没有成功。

https://jsfiddle.net/5zo9sh8b/19/

Answer 1

根据需要实现文本到时间函数。这是一个简单的代码，但你可以改进它

var $el = $(".example:first"), text = $.trim($el.text()),
words = text.split(" "), html = "";
for (var i = 0; i < words.length; i++) {
html += "<span style="display:none">" + words[i] + ((i+1) === words.length ? "" : " ") + "</span>";
}
elements = $el.html(html).children();
function text_to_time(text){
// implement your function
times = [100, 100, 100, 100, 100, 1000, 1500, 1500, 2000, 2000];
return times[text.length];
}
function next_word(i, _elements){
element = _elements[i];
element = $(element);

element.fadeIn(500, function() {
i = i + 1;
if (_elements.length > i){
time = text_to_time($(_elements[i]).text());
setTimeout(function() {
next_word(i, _elements);
}, time);
}
});
}
setTimeout(function() {
next_word(0, elements);
}, 1000);

.example{
font-size:5vw;
font-weight:700;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="example">
Ohne uns wäre es einfach
</div>