Javascript 使用jquery和HTML5数据属性设置背景色动画

我正在尝试使用jQuery和HTML5

数据

属性的组合来设置特定div的

背景色

的动画。我对实现这一目标的最佳方法持开放态度，但我相信上述方法对我的情况最有意义

我想在使用Wordpress高级自定义字段插件设置的一组颜色之间进行淡入淡出，因此使用

data

属性的理由是，这样我就可以在DOM中动态设置这些颜色

下面是

div

的标记，包括颜色，但是我不知道如何实现jQuery在所有颜色之间设置动画，最好是随机设置

有人能帮忙吗？谢谢

<div id="content" data-colors="<?php if( have_rows('dot_colours', 'option') ): ?><?php while( have_rows('dot_colours', 'option') ): the_row(); ?><?php the_sub_field('colour'); ?>,<?php endwhile; ?><?php endif; ?>
    ">
Content here.
</div>

---

像这样的东西可以工作：

HTML（假设PHP返回一个数组作为
数据颜色的值
）

下面是一个代码笔来演示：

编辑：忘了提一下，彩色动画是jQuery UI的一部分，而不是jQuery。如果没有jqueryui，您可以使用CSS转换

添加到您的CSS中：

#myDiv {
  transition: background-color 1s;
}

将
changeColor（）
函数更改为：

function changeColor() {
  i++;
  i = i % colors.length;
  el.css('background-color', colors[i]);
  setTimeout(changeColor,2500);
}

在这里，这个答案是通过css转换得到的。。您还可以通过以下方式清除淡入淡出：

clearInterval( window.it );


var arr=$（'.ch'）.first（）.attr（'data-colors'）；//红、绿、蓝、紫、灰
arr=arr.split（'，'）；//[“红色”、“绿色”、“蓝色”、“紫色”、“灰色”]
//第一次设置属性
$（'.ch'）.first（）.attr（'len'，0）；
函数changeColor（）{
var len=阵列长度；
var atm=$（'.ch'）.first（）.attr（'len'）；
$（'.ch'）.first（）.css（'background color'，arr[atm]）；
if（atm==len）$（'.ch'）.first（）.attr（'len'，0）；
if（atm！=len）$（'.ch'）.first（）.attr（'len'，parseInt（atm）+1）；
}
window.it=setInterval（changeColor，2000）
.ch{
背景色：红色；
-webkit转换：后台2s；
-moz跃迁：背景2s；
-o-转变：背景2s；
过渡：背景2s；
宽度：100vw；
高度：100vh；
}
正文{margin:0；padding:0；}


function changeColor() {
  i++;
  i = i % colors.length;
  el.css('background-color', colors[i]);
  setTimeout(changeColor,2500);
}

clearInterval( window.it );