使用jquery在数组的范围内定期更改文本 [英] changing text periodically in a span from an array with jquery

问题描述

我有一个范围，例如：

<p>Here is a sentence <span id="rotate">this</span> is what changes</p>

我希望该范围内容能够在术语列表之间每隔几分钟更改一次，因此内容可能会更改为：

and I'd like the contents of that span to change every few moments between a list of terms, so the contents might change to be:

<span id="rotate">then</span>
<span id="rotate">thus</span>

依此类推。我希望文本淡出然后新文本淡入。

and so on. I'd like the text to fade out and then the new text fade in.

通过jquery做到这一点的最好方法是什么？

Whats the best way to do this via jquery?

推荐答案

您可以执行以下操作：使用 .data（） 也支持多个地方：

You could do something like this, storing the current index on the element rotating using .data() to support it multiple places as well:

var terms = ["term 1", "term 2", "term 3"]; //array of terms to rotate

function rotateTerm() {
  var ct = $("#rotate").data("term") || 0;
  $("#rotate").data("term", ct == terms.length -1 ? 0 : ct + 1).text(terms[ct])
              .fadeIn().delay(2000).fadeOut(200, rotateTerm);
}
​​​​​​​​​​​​​​​​​​​$(rotateTerm); //start it on document.ready
​

这会在第一个任期内消失，等待2秒，淡出，更改文本并重复....只需将值调整为您想要的值：）

This fades the first term in, waits 2 seconds, fades it out, changes the text and repeats....just adjust the values to what you want :)

这是一个快速演示，以便您可以看到它的实际效果

这篇关于使用jquery在数组的范围内定期更改文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！