title: Mootools animate background-color
body: <p>I have a list of colors, that needs to be animated as a document body background-color.</p>
  
  <pre><code>var bgs = [
      "BlanchedAlmond",
      "Blue",
      "BlueViolet",
      "Brown",
      "BurlyWood",
      "CadetBlue",
      "Chartreuse",
      "Chocolate",
      "Coral",
      "CornflowerBlue",
      "Cornsilk",
      "Crimson",
      "Cyan",
      "DarkBlue",
      "DarkCyan"
  ];
  </code></pre>
  
  <p>Now, using <a href="https://stackoverflow.com/a/3892864/863980">colorToHex() custom function for mootools</a>, I ended up with the following code:</p>
  
  <pre><code>window.addEvent('domready', function() {
    var current;
    (function() {
      selected = ~~(Math.random() * bgs.length);
  
      // is it a right way to avoid the repetition?
      current = (selected == current) ? ((bgs.length-1) % (selected+1)) : selected;
      // -1 is to avoid the edge case,
      // +1 is to avoid the NaN in case select is 0
  
      $(document.body).set('tween', {duration: '1500'})
        .tween("background-color",bgs[current].colorToHex());
    }).periodical(1000);
  });
  </code></pre>
  
  <p><strong>Questions</strong></p>
  
  <ol>
  <li><p><sup>(optimization of the aforementioned chunks of code)</sup> From the performance optimization perspective, is there a better way to perform this animation?</p></li>
  <li><p><sup>(vs. jQuery)</sup> Would the jQuery counterpart be more <em>efficient</em> and <em>elegant</em>?</p></li>
  </ol>