периодически меняя текст в промежутке из массива с помощью 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 секунды, затемнение, изменение текста и повторений .... просто измените значения на то, что вы хотите:)

Вот небольшая демонстрация, чтобы вы могли увидеть ее в действии