Question

I’m trying to create an animation for text on a page that, every few seconds, changes one word out with another word from a list. Example: I have a header that says, “This is cool,” but I want “cool” to be replaced every few seconds by “neat/awesome/groovy/etc”.

I’m honestly not sure the best way to go about this (in terms of what technology to use) and I can’t find a blurb of code that works with modern browsers. Help is greatly appreciated!

Answer 1

In jQuery, I’d do something like this:

http://jsfiddle.net/6SRaB/1/

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() { // on document load
    changer();
});

function changer() {
    var words = ["nifty","groovy","far out"]; // add as many as you like
    var idx = Math.floor(words.length * Math.random());  // randomizer
    $('#change').text(words[idx]); // replaces the contents of "change"
    var time = Math.floor(5000 * Math.random() + 3000);  // in milliseconds
    setTimeout(changer,time);  // lather, rinse, repeat
}
</script>
...
<h2>This is <span id="change">cool</span></h2>

The key is to use a SPAN tag with an ID that you can pick out quickly.