javascript - 逐字淡入文本，在当前完全可见之前开始淡出下一个单词

Question

我正在尝试使段落中的文本逐字淡出。我搜索了很多，找到了一些代码。代码运行良好，但我试图让下一个词在当前词完成之前开始淡出。

因此，使用当前代码，单词一个接一个地出现。现在，当当前单词的不透明度约为 75% 时，我希望下一个单词开始出现，这样它看起来会更暗淡。

我的代码:

var p = $(".sentences > p").hide();
(function oneParagraph(i) {
    if (p.length <= i)
        return;
    var cur = p.eq(i),
        words = cur.text().split(/\s/),
        span = $("<span>"),
        before = document.createTextNode("");
    cur.empty().show().append(before, span);
    (function oneWord(j) {
        if (j < words.length) {
            span.hide().text(words[j]).fadeIn(500, function() {
                span.empty();
                before.data += words[j]+" ";
                oneWord(j+1);
            });
        } else {
            span.remove();
            before.data = words.join(" ");
            if((p.length - 1) > i) {
              setTimeout(function(){
                p.hide();
              }, 750);
            }
            setTimeout(function(){
                oneParagraph(i+1);
            }, 1000);
        }
    })(0);
})(0);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sentences">
  <p>This is only a simple paragraph #1</p>
  <p>This is only a simple paragraph #2</p>
  <p>This is only a simple paragraph #3</p>
  <p>This is only a simple paragraph #4</p>
  <p>This is only a simple paragraph #5</p>
</div>

编辑

我找到了一种创建所需效果的方法，但现在我遇到了另一个问题。我不知道如何在显示后隐藏句子。

var P = $('.sentences > p');

P.hide().contents().each(function() {
    var Words;
    if (this.nodeType === 3) {
        Words = '<span> ' + this.data.split(/\s+/).join(' </span><span> ') + ' </span>';
        $(this).replaceWith(Words);
    } else if (this.nodeType === 1) {
        this.innerHTML = '<span> ' + this.innerHTML.split(/\s+/).join(' </span><span> ') + ' </span>';
    }
});

P.find('span').hide().each(function() {
    if( !$.trim(this.innerHTML) ) {
        $(this).remove();
    }
});

P.show().find('span').each(function(I) {
    $(this).delay(200 * I).fadeIn(800);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sentences">
  <p>This is only a simple paragraph #1</p>
  <p>This is only a simple paragraph #2</p>
  <p>This is only a simple paragraph #3</p>
  <p>This is only a simple paragraph #4</p>
  <p>This is only a simple paragraph #5</p>
</div>

Answer 1

您的代码正在等待来自 fadeIn 方法的回调，您可能会尝试不等待它完成，只需创建一个占 fadeIn 时间 75% 的计时器，并将其分配给下一步。

//代替

span.hide().text(words[j]).fadeIn(500, function() {
                span.empty();
                before.data += words[j]+" ";
                oneWord(j+1);
            });

//类似的东西

span.hide().text(words[j]).fadeIn(500);
window.setTimeout(300, function(){
    span.empty();
                before.data += words[j]+" ";
                oneWord(j+1);
});