How to finish clean banner

Question

I need help with how to finish this very simple and clean banner.

For the text, I think it is okay. I need change each text in at same time as the background-color.

The banner has 3 steps, 3 different background colors and text (if possible with fade effect).

I don't have the solution

Please help me.

PS: This is my example work: Work Beta

<span id="example" style="background:red">TEXT 1</span>

Thanks

Answer 1

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');