如何完成干净的横幅

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

要更改颜色，您可以

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

<小时/>

Fadding Background-Color

要做褪色，您需要使用jQueryUI 这是你如何做到的：

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