使用 JavaScript 动画文本随时间变化答案

【问题标题】：Animate text change over time with JavaScript使用 JavaScript 动画文本随时间变化
【发布时间】：2018-01-29 18:32:10
【问题描述】：

我需要动画文本随着时间的推移而永不停止的变化。

我用 jquery 找到了这个简单的例子：

      $(function() {

    $('#header-text-change').fadeOut(500, function() {
        $(this).text('Some other text!').fadeIn(500);
    });

});

现在我需要有多个预定义文本，并且动画会永远循环播放。

谢谢。

【问题讨论】：

您是否尝试过与您想做什么相关的示例？你能发布那个代码吗？这不是编码服务。
对不起，我不够具体。我知道不是。我需要使用 ID header-text-change 为单个 HTML 元素中的文本更改设置动画。因此，您可以指定几个随时间变化的字符串作为指定 HTML 元素中的内容。

标签： javascript jquery html css

【解决方案1】：

您可以使用setInterval() 函数每 N 毫秒循环一次。

看这段代码sn-p：

此示例在点击 TEXTS.length 时将 index 变量重置为 0

var TEXTS = ["Some other text!", "Lord of the Rings", "Avengers", "Whatever text"];

var index = 0;

$(function() {
  setInterval(function() {
    $('#header-text-change').fadeOut(500, function() {
      $(this).text(TEXTS[index++]).fadeIn(500);
      if (index === TEXTS.length)
        index = 0
    });
  }, 1000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id="header-text-change">
  Hellow World!!
</h1>

看到了吗？现在您的代码正在循环，在本例中是每秒 (1000 毫秒)。

【讨论】：

【解决方案2】：

function fadeout(){$('#header-text-change').fadeOut(undefined,changeText)}
function changeText(){
    // implements your logic for changing the text
    fadein();
}
function fadein(){$('#header-text-change').fadeIn(undefined,fadeout)}

您调用淡出，它使用回调循环（并且它们被命名以便您可以引用它们）。将 undefined 作为第一个参数传递给 fadeOut/fadeIn 将使用默认值 400 毫秒，您可以通过传递一个存储动画需要多长时间的变量来更改它。

【讨论】：