For a less flexible, but easy(er) to understand code that uses true opacity rather than color changes:
rotate.js
Code:
function rotateText(el, textGroup) {
setOpacity(el, 0);
var t = rotateText.texts[textGroup];
var t = t[Math.floor(Math.random() * (t.length - 1))];
el.innerHTML = t;
unfadeText(el, textGroup);
}
rotateText.texts = {
quotes: [
"...The big brown fox jumped over the tall fence",
"...The wind is blowing cold snow across the dark black road",
"...Fall has many colors and black is not one of them",
"...the blue bird lives in the big red barn",
"...Mr. Grant really believes that the Bull’s skills, which are widespread",
"...Sixth quotation"
],
authors: [
"Mark Twain",
"Charles Dickens",
"Edgar Allen Poe"
],
restaurants: [
"Burger King",
"McDonalds",
"Taco Bell",
"Wendy's"
]
};
function setOpacity(el, value) {
el.style.opacity = value / 100;
el.style.filter = "alpha(opacity=" + value + ")";
}
function unfadeText(el, tg) {
var v = el.style.opacity * 100 + 1;
if(v > 100) {
setOpacity(el, 100);
setTimeout(bundleFunction(null, fadeText, [el, tg]), 2000);
return;
}
setOpacity(el, v);
setTimeout(bundleFunction(null, unfadeText, [el, tg]), 10);
}
function fadeText(el, tg) {
var v = el.style.opacity * 100 - 1;
if(v < 0) {
setOpacity(el, 0);
rotateText(el, tg);
//or... setTimeout(bundleFunction(null, rotateText, [el, tg]), NUMBER);
return;
}
setOpacity(el, v);
setTimeout(bundleFunction(null, fadeText, [el, tg]), 10);
}
function bundleFunction(context, func, args) {
context = context || null;
if(typeof func == "string" && context)
func = context[func];
if(!args)
args = [];
else if(!(args instanceof Array))
args = [args];
return function() {
return func.apply(context, args);
};
}
rotate.html
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Rotate</title>
<script type="text/javascript" src="rotate.js"></script>
</head>
<body><div>
<div style="width: 100%; background-color: #000; color: #ccf;" id="quotes"></div>
<div style="width: 100%; background-color: #fff; color: #000;" id="authors"></div>
<div style="width: 100%; background-color: #0a0; color: #ff0;" id="restaurants"></div>
<script type="text/javascript">
rotateText(document.getElementById("quotes"), "quotes");
rotateText(document.getElementById("authors"), "authors");
rotateText(document.getElementById("restaurants"), "restaurants");
</script>
</div></body>
</html>