如何完成清潔橫幅

Question

我需要如何完成這個非常簡單和乾淨的橫幅的幫助。

對於正文，我認爲沒關係。我需要與背景顏色同時更改每個文本。

橫幅有3個步驟，3種不同的背景顏色和文字（如果可能的話帶淡化效果）。

我沒有解決方案

請幫幫我。

PS：這是我的示例工作：Work Beta

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

感謝

Answer 1

在你的jsfiddle例如，你可以這樣做：

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

還要確保第一要素是顏色數組與您使用style="background:red"指定的元素的初始顏色相匹配還可以使用background-color而不是background。下面參見注釋進行說明

Demo jsFiddle

_{and one more which is slightly more optimized}

---

釋

您可以使用jQuery來改變元素的CSS屬性：

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

要改變c的olor，你可以做

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

---

Fadding背景顏色

要做到衰落，你需要使用jQueryUI 這裏是你如何做到這一點：

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