jQuery animates the background color. Delete Math.random

I want to animate between an array of background colors.

I found the following code, but it uses Math.random to display background colors in random order.

 $(document).ready(function() { setInterval(function() { var theColours = Array('#ffffff','#000000','#00ff00','#ff0000','#0000ff'); var theColour = theColours[Math.floor(Math.random()*theColours.length)]; $('#branding').animate({backgroundColor: theColour}, 500); }, 1000); }); 

jsFiddle

I want to remove the Math.random and display the next color in the table.

However, if I replace Math.random , by the following, the animation does not go beyond the first color of the table.

 $(document).ready(function() { setInterval(function() { var theColours = Array('#ffffff','#000000','#00ff00','#ff0000','#0000ff'); var currentColour = 0; var theColour = theColours[Math.floor(currentColour++ % theColours.length)]; $('#branding').animate({backgroundColor: theColour}, 500); }, 1000); });