Mootools background changing.

Question

I want mootools to change the background color constantly. I have no idea how to do this but I have come up with the following code so far as a test but it doesn't work at all. How can I chain colors and then call it again and again so I have this "rainbow" background?

function rainbow() {
    $(document.body).highlight("#fff");
    rainbow();
}

Answer 1

You could use setInterval(); and .getRandom();

setInterval(function(){
  var newColor = ["#FFF","#CCC","#999"].getRandom();
  $(document.body).highlight(newColor);
}, 1000); // run every 1 second

Answer 2

You need to use chaining here. Example:

var color = "#fff";
function rainbow() {
    $(document.body).highlight(color).get('tween').chain(rainbow);
    color = (color == "#fff") ? "#000" : "#fff";
};
rainbow();

That's a simple example. But you can see how the chaining works; you call a function when the effect completes. What color you choose every iteration is up to you; here I just cycle from black to white and back.