Custom Web Design & Development

jQuery Animate Background-color

For those times when you need something a little different on your web site that doesn't consume a lot of bandwidth,

Live Demo


You will need the core jQuery library plus jQuery UI for this to work. Insert the following links into your HTML document.

<script src=""></script> 
<!--jQuery UI-->  
<script src=""></script> 

Feel free to experiment with this code snippet.  Adjust color array and animation values as desired.

$(document).ready(function() {  
  setInterval(function() {
  var theColors = Array('#EAEAEA','#F0E6F1','#D4D4FF','#C6DFE6','#FFD4D4','#FAF2CC');
  var theColor = theColors[Math.floor(Math.random()*theColors.length)];
  $('body').animate({backgroundColor: theColor}, 2300);
  }, 2500);