Eu gostaria que uma div
ficasse alternando as cores, duas cores de preferência. Se quiserem podem colocar mais de um exemplo. Mas, minha preferência, é que a cor mude a cada 40 segundos.
2 Respostas
Você pode fazer isso com jQuery de forma simples, da seguinte forma:
$(document).ready(function() {
var colors = ["#f9f9f9", "#049fce"];//Array com as cores, pode adicionar contas quiser
var i = 0;
setInterval(function(){
$('.divclass').css('background', colors[i]);
i = (i == (colors.length -1)) ? 0 : i+1;
},40000);//40 Segundos em Milisegundos
});
Ou com JavaScript puro:
var colors = ["#049fce", "#f9f9f9"];//Array com as cores, pode adicionar contas quiser
var i = 0;
setInterval(function(){
document.getElementById('divid').style.background = colors[i];//A div deve ter um id, não funciona com class
i = (i == (colors.length -1)) ? 0 : i+1;
},40000);//40 Segundos em Milisegundos
-
-
1
-
E se eu quiser utilizar em mais de uma div? setInterval(function(){ $('#Divclass').css('background', colors[i]); i = (i == (colors.length -1)) ? 0 : i+1; },5000); Commented 16/10/2017 às 14:32
-
Selecione a div que deseja mudar a cor e use uma função setTimeout com o numero de segundos que precisa, no caso, 40000, use um if para fazer com que um contador esteja sempre os dois índices de um array com duas cores, veja:
const colorDiv = document.querySelector('.change-color');
let counter = 0;
const colorArr = ['red', 'yellow']
setInterval(
()=> {
counter++
if (counter == colorArr.length) {
counter = 0
}
colorDiv.style.background = colorArr[counter];
}, 3000
)
.change-color {
background: red;
width: 300px;
height: 300px;
}
<div class="change-color"></div>
setTimeOut
ousetInterval
. A resposta vc vai achar sozinho.