javascript - 使用 jquery 在数组的范围内定期更改文本

Question

我有一个跨度，例如:

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

并且我希望该跨度的内容在术语列表之间每隔几分钟更改一次，因此内容可能更改为:

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

等等。我希望文本淡出，然后新文本淡入。

通过 jquery 执行此操作的最佳方法是什么？

Answer 1

您可以这样做，将当前索引存储在使用 .data() 旋转的元素上在多个地方也支持它:

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 秒，淡出，更改文本并重复....只需将值调整为您想要的值:)

Here's a quick demo so you can see it in action