How To Create A Multi-color Text String That Changes Colors Periodically (like Las Vegas Banners)

I am trying to create a banner/title for a page that is multi-color - and also changes those colors every 10 seconds (based on a config value) I have the following fiddle (http://j

Solution 1:

Here is what I came up with:

var colors = ["red", "orange", "yellow", "pink", "purple", "blue", "brown"];
var title = "See Live Monkeys";
var interval = 10000;

functionrandomizeTextColor() {
    $(".rainbow").empty();
    for (var i = 0; i < title.length; i++) {
        var color = colors[Math.floor(colors.length * Math.random())];
        var letter = $("<span>", {
            text: title.charAt(i),
            css: {
                color: color
            }
        });
        $(".rainbow").append(letter);
    }
}

$(randomizeTextColor);

window.setInterval(randomizeTextColor, interval);

REVISED CODE

var colors = ["red", "orange", "yellow", "pink", "purple", "blue", "brown"];
var interval = 500;

functionrandomizeTextColor(element) {
    var text = $(element).text();
    $(element).empty();
    for (var i = 0; i < text.length; i++) {
        var color = colors[Math.floor(colors.length * Math.random())];
        var letter = $("<span>", {
            text: text.charAt(i),
            css: {
                color: color
            }
        });
        $(element).append(letter);
    }
}

functionrandomize(selector) {
    $(selector).each(function() {
        randomizeTextColor(this);
    });
}

$(randomize(".rainbow"));
window.setInterval(function() { randomize(".rainbow") }, interval);