Javascript 改变背景颜色

我有一个背景设计成对角线的页面。我想让这些行的颜色随着jQuery的变化而缓慢变化，并随着它们的变化而褪色。这可能吗

我已经开始摆弄其中的CSS，将背景显示为静态

这是代码

body {
    background-image: -webkit-gradient(linear, right bottom, left top, color-stop(0, #fff), color-stop(0.25, #fff), color-stop(0.25, #9CC), color-stop(0.5, #9CC), color-stop(0.5, #fff), color-stop(0.75, #fff), color-stop(0.75, #9CC));
    background-image: -webkit-linear-gradient(right bottom, #fff 0%, #fff 25%, #9CC 25%, #9CCb 50%, #fff 50%, #fff 75%, #9CC 75%);
    background-image: -moz-linear-gradient(right bottom, #fff 0%, #fff 25%, #9CC 25%, #9CC 50%, #fff 50%, #fff 75%, #9cc 75%);
    background-image: -ms-linear-gradient(right bottom, #fff 0%, #fff 25%, #bbb 25%, #bbb 50%, #fff 50%, #fff 75%, #bbb 75%);
    background-image: -o-linear-gradient(right bottom, #fff 0%, #fff 25%, #9CC 25%, #9CC 50%, #fff 50%, #fff 75%, #9CC 75%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#9CC',GradientType=0 ); / IE6-8 */
    background-image: linear-gradient(right bottom, #fff 0%, #fff 25%, #9CC 25%, #9CC 50%, #fff 50%, #fff 75%, #9CC 75%);
    background-size: 5px 5px;
    width:100%;
    height:100%;
}

---

您可以将背景图像设置为GIF格式，如果您负担得起额外的大小，最好是PNG格式，并利用透明度。您的图像将具有白色和透明的条纹。然后，将背景图像覆盖在背景色的顶部，可以设置背景色的动画。效果将是行的颜色发生变化。

我建议使用css3转换，而不仅仅是jQuery。 使用jQuery切换类，并在单独的css文件中设置背景渐变

例如：

.defaultClass{
    -webkit-transition: color 0.3s;
    -moz-transition: color 0.3s;
    -ms-transition: color 0.3s;
    -o-transition: color 0.3s;
    transition: color 0.3s;
}

.blue{
    background-color: blue;
}

.red{
    background-color: red;
}

将蓝色类添加到元素会使其在0.3秒内褪色太蓝

这里是它的小提琴：

编辑：这最大的好处是jQuery动画在手机/平板电脑上运行缓慢，而css3动画通常在answer上运行平稳。。您将需要

这是一个

CSS

---

更新是淡入白色

我开发了一个轻量级jQuery插件（~3kb），它使用CSS3转换来完成您想要的-

您可以使用它转换各种CSS颜色属性，例如背景颜色、框阴影颜色和文本颜色。将来将支持更多属性

用法示例：

$('#element').colorRotator({
    colors: ['#1abc9c','#16a085','#2ecc71','#27ae60'],
    property: 'background'
});

---

以下是一些

请参见此处的公认答案：@user2501613未阅读问题！他想改变线条的颜色，而不是图像的颜色。在发布任何内容之前，请先阅读问题。谢谢你。哇，你这一次进展太慢了。你一开始就想出了一个愚蠢的点子，然后又遇到了同样的问题。（改变背景色）@Ruddy Soo。。。我一直在使用这种技术，效果很好。也不用担心浏览器的可比性。我没说这不起作用。我说你没有得到答案（如果你能称之为答案的话）。提供代码和带有解释的JSFIDLE。这是一个答案。谢谢你，我真的很想使用ccs3动画，但我不确定如何使用对角线？只需将背景颜色（css处）更改为与右侧线条对应的背景图像。示例：.line1{背景图像：线性渐变（右下角，fff 0%，#fff 25%，#9CC 25%，#9CC 50%，#fff 50%，#fff 75%，#9CC 75%）}。line2{背景图像：线性渐变（右下角，#000 0%，#000 25%，#9CC 25%，#9CC 50%，#000 50%，#000 50%，#75%，#CC 75%。}

body {
    background-image: url(http://i.stack.imgur.com/V3pEr.png);
    background-color: #12877f;
}

$('#element').colorRotator({
    colors: ['#1abc9c','#16a085','#2ecc71','#27ae60'],
    property: 'background'
});