javascript - 使用 jquery 和 HTML5 数据属性为背景颜色设置动画

Question

我正在尝试使用 jQuery 和 HTML5 data 属性的组合为特定 div 的 background-color 设置动画。我对实现这一目标的最佳方式持开放态度，但我相信上述内容对我的情况最有意义。

我想在使用 Wordpress Advanced Custom Fields 插件设置的一组颜色之间淡入淡出，因此使用 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>

Answer 1

像这样的东西会起作用:

HTML(假设 PHP 为 data-colors 的值返回一个数组)

<div id="myDiv" data-colors='["#b3e45f", "red", "yellow", "green", "blue"]'></div>

JavaScript

const el = $('#myDiv');
const colors = el.data('colors');
let i = 0;

el.css("background-color", colors[i]);

function changeColor() {
  i++;
  i = i % colors.length;
  el.animate({backgroundColor: colors[i]},1000);
  setTimeout(changeColor,2500);
}

changeColor();

这里有一个 Codepen 来演示:https://codepen.io/MarkRabey/pen/MobeLo

编辑:忘记提及，彩色动画作为 jQuery UI 的一部分可用，而不是 jQuery。如果没有 jQuery UI，您可以改用 CSS 过渡。

添加到您的 CSS:

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

将 changeColor() 函数更改为:

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