Question

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

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

      $(function() {

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

});

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

感谢。

Answer 1

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

查看此代码段：

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

＆＃13;

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);
});

＆＃13;

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

＆＃13;

请参阅？现在你的代码正在循环，在这种情况下每隔一秒（1000毫秒）。

Answer 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)}

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

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

2 个答案: