在 javascript 中更改具有不同持续时间的文本

Question

你好 Whosebug 社区，

我的目标是创建具有不同持续时间的变化文本，这意味着某些 "markers" 或句子的停留时间比我现在的 2 秒长。另外，我希望动画在显示所有列表条目后停止。

这是我现在的代码：

Javascript：

    var terms = $("ul li");

    function rotateTerm() {

     var ct = $("#rotate").data("term") || 0;

     console.log(terms.eq([ct]).text());

      $("#rotate").data("term", 
        ct == terms.length -1 ? 0 : ct + 1).text(terms.eq([ct]).text())
      .fadeIn().delay(2000).fadeOut(200, rotateTerm);

    }
    $(rotateTerm);

HTML

    <p><span id="rotate">default</span></p>

    <ul style="display:none">
        <li>This is sentence number one.</li>
        <li>That is sentence number two.</li>
        <li>This is another sentence.</li>
        <li>Another sentence.</li>
    </ul>

谢谢！

Answer 1

我希望这能解决问题：

我添加了这段代码：ct < terms.length -1 && rotateTerm。这样它就不会在最后一个元素

之后调用 rotateTerm 函数

并且我添加了一个timeDelay数组var timeDelay = [1000, 2000, 4000, 8000]来为不同的句子启用不同的时间延迟。

var terms = $("ul li");

    function rotateTerm() {

     var timeDelay = [1000, 2000, 4000, 8000];
     var ct = $("#rotate").data("term") || 0;
     console.log(terms.eq([ct]).text());
     console.log(ct)
      $("#rotate").data("term", 
        ct == terms.length -1 ? 0 : ct + 1).text(terms.eq([ct]).text())
      .fadeIn().delay(timeDelay[ct]).fadeOut(200, ct < terms.length -1 && rotateTerm);

    }
    $(rotateTerm);

或者您可以根据文本的长度设置延迟

var terms = $("ul li");

function rotateTerm() {

  var ct = $("#rotate").data("term") || 0;
  const text = terms.eq([ct]).text()
  const textLength = text.length;
  console.log(textLength)
  const timeDelay = textLength < 50 ? 2000 : textLength * 50
  $("#rotate").data("term",
      ct == terms.length - 1 ? 0 : ct + 1).text(text)
    .fadeIn().delay(timeDelay).fadeOut(200, ct < terms.length - 1 && rotateTerm);

}
$(rotateTerm);

在 javascript 中更改具有不同持续时间的文本

changing text with different duration in javascript

javascript

text

animatewithduration