changing text periodically in a span from an array with jquery

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 cha开发者_开发技巧nge 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?

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