Random select value in array and next apply to jQuery function

Question

I have this function that returns a random color, but I want to apply it to jQuery .animate() function.

How can I do that?

var colors = ["rgb(120,25,25)", "rgb(50,100,130)", "rgb(30,95,45)", "rgb(55,30,90)"];
function randomBackground() {
   return colors[Math.floor(Math.random() * messages.length)];
}
$("#menu").animate({background: randomBackground()});

Answer 1

You could do:

var colors = ["rgb(120,25,25)", "rgb(50,100,130)", "rgb(30,95,45)", "rgb(55,30,90)"];
function randomBackground() {
   return colors[Math.floor(Math.random() * colors.length)];
   //use colors.length, not messages.length
}

var bgcolor = randomBackground();
$("#menu").animate({background: bgcolor });

Answer 2

sorry for you but if you read the jQuery documentation :

All animated properties should be animated to a single numeric value, except as noted below; most properties that are non-numeric cannot be animated using basic jQuery functionality. (For example, width, height, or left can be animated but background-color cannot be.) Property values are treated as a number of pixels unless otherwise specified. The units em and % can be specified where applicable.

that meens you cannot do the background color change using animate()