Change background color of HTML elements using JavaScript over a specific period of time?
I have about 26 html elements for which I need the following effect in JavaScript:
Can you do something like this?
I tried to do it like this:
var j = 2000;
for (i = 1; i <= 26; i++) {
setInterval(function() {document.getElementById('Q' + i).style.backgroundColor = '#00a300'}, j);
setInterval(function() {document.getElementById('Q' + i).style.color = '#FFFFFF'}, j);
j = j + j;
setInterval(function() {document.getElementById('Q' + (i-1)).style.backgroundColor = '#e1e1e1'}, j);
setInterval(function() {document.getElementById('Q' + (i-1)).style.color = '#666666'}, j);
}
I am new to JavaScript and have never worked with timers.
source to share
I created a small sample script using the jQuery.animate function and the jQuery plugin to create fading animations of the background color.
The fiddle can be found here: http://jsfiddle.net/nafm74yd/15/
Note that there is one external resource in the left pane of the jsfiddle that points to the jQuery color plugin on its CDN.
The script looks something like this:
function animate(idx) {
$($('.block')[idx]).animate({ backgroundColor: "#ff0000" }, 200, function () {
var idx2 = idx;
$($('.block')[idx2]).animate({ backgroundColor: "#ffffff" }, 200, function () {});
if (idx >= $('.block').length - 1) {
setTimeout(animate(0), 200);
} else setTimeout(animate(idx + 1), 200);
});
}
$(document).ready(function () {
animate(0);
});
source to share
CSS
div {
display:block;
background:black;
width:200px;
height:40px;
margin:2px 0px 0px 0px;
}
Html
<div></div><div></div><div></div>....
Js
function animateStuff(domElements, baseColor, activeColor, delay) {
var count=0;
var animationRun=1;
var frames=0;
function frame() {
frames++;
if((frames%delay)==1){//set delay only animate on loops that the set delay has past.
count++;
if(count>=domElements.length){
count=0;//back to the beginning of the loop.
}
// make all the divs black
for(var x=0;x<domElements.length;x++){
domElements[x].style.backgroundColor=baseColor;
}
// make one red
domElements[count].style.backgroundColor=activeColor;
}
if(animationRun){
window.requestAnimationFrame(frame);
}
}
frame();
}
//get an array of elements to animate.
var elements = document.getElementsByTagName("div");
//call animation and pass in the array of elements along with a few color settings and the delay.
animateStuff(elements,"black","red",100);
RequestAnimationFrame () will give you a consistent value of ~ 60 frames per second. It also stops the animation loop when the tab is not showing. The animation starts when the tab is displayed. (frames%delay)==1
- slow down the animation so that it is visible.
A good example of using this technique is the javascript engine I made the source. https://github.com/Patrick-W-McMahon/Jinx-Engine
source to share