Comment terminer la bannière propre

Question

J'ai besoin d'aide pour terminer cette bannière très simple et propre.

Pour le texte, je pense que c'est correct. J'ai besoin de changer chaque texte en même temps que la couleur de fond.

La bannière comporte 3 étapes, 3 couleurs de fond différentes et du texte (si possible avec effet de fondu).

Je n'ai pas la solution

S'il vous plaît aidez-moi.

PS: Ceci est mon travail exemple: Work Beta

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

Merci

Answer 1

Dans votre exemple jsFiddle, vous pouvez le faire:

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

Assurez-vous également que le premier élément est la matrice de couleur correspond à la couleur initiale de votre élément que vous spécifiez en utilisant style="background:red" Utilisez également background-color au lieu de background. Voir le commentaire ci-dessous pour l'explication

Demo jsFiddle

_{and one more which is slightly more optimized}

---

Explaination

Vous pouvez utiliser jQuery pour changer la propriété CSS d'un élément:

$("#example").css({'property_name': 'value'}); 

Pour changer le c olor, vous pouvez faire

$("#example").css({'background-color': 'yellow'}); 

---

Fadding background-color

Pour faire la décoloration, vous aurez besoin d'utiliser jQueryUI Voici comment vous le faites:

$('#example').animate({backgroundColor: '#FF0000'}, 'slow');