changing text periodically in a span from an array with jquery

Question

I have a span, eg:

<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.

Whats the best way to do this via jquery?

Answer 1

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
​

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 :)

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