使用jQuery和HTML5数据属性的动画背景颜色

我想使用jQuery和HTML5 data属性的组合来动画特定div的background-color。我愿意为实现这一目标提供最佳方式，但我相信上述内容对我的情况最有意义。使用jQuery和HTML5数据属性的动画背景颜色

我想在使用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>

来源

2017-06-15 dungey_140

像这样将工作：

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

来源

2017-06-15 14:14:41

这里，这个答案是通过CSS过渡..你也可以清晰fadeing在：

clearInterval(window.it);

var arr = $('.ch').first().attr('data-colors'); // "red, green, blue, purple, gray" 
 
arr = arr.split(','); // ["red", " green", " blue", " purple", " gray"] 
 

 
// set attrib for first time 
 
$('.ch').first().attr('len', 0); 
 

 
function changeColor(){ 
 
    var len = arr.length; 
 
    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{ 
 
    background-color: red; 
 
    -webkit-transition:background 2s; 
 
    -moz-transition:background 2s; 
 
    -o-transition:background 2s; 
 
    transition:background 2s; 
 
    width: 100vw; 
 
    height: 100vh; 
 
} 
 
body{ margin: 0; padding: 0; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="ch" data-colors="red, green, blue, purple, gray">&nbsp;</div>

来源

2017-06-15 14:36:24

使用jQuery和HTML5数据属性的动画背景颜色

回答

相关问题