In your jsFiddle example, you can do:
var texts = ["TEXT 1", "TEXT 2", "TEXT 3"];
var colors = ['#FF0000', '#00FF00', '#0000FF'];
var count = 0;
function changeText() {
$("#example").text(texts[count]);
$("#example").css({'background-color': colors[count]});
count < 3 ? count++ : count = 0;
}
setInterval(changeText, 1000);
Also make sure that the first element is the color array matches the initial color of your element you specify using style="background:red"
Also use background-color
instead of background
. See comment below for explanation
Demo jsFiddle
and one more which is slightly more optimized
Explaination
You can use jQuery to change the css property of an element:
$("#example").css({'property_name': 'value'});
To change the color, you can do
$("#example").css({'background-color': 'yellow'});
Fadding Background-Color
To do the fading you'll need to use jQueryUI Here is how you do it:
$('#example').animate({backgroundColor: '#FF0000'}, 'slow');