Change background color of HTML elements with JavaScript in a certain time period?

Question

I have around 26 html elements for which I want the following effect in JavaScript:

Is it pos

Answer 1

I have constructed a little fiddle example using jQuery.animate function, and jQuery color plugin to create fade animations of background color.

Please find the fiddle here: http://jsfiddle.net/nafm74yd/15/

Please notice there is one external resource used in the left hand panel of the jsfiddle... it points to the jQuery color plugin to its CDN.

the script is 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);
    });

Answer 2

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 ~60fps on average. It also stops the animation loop when the tab is not being displayed. The animation starts when the tab is being displayed. (frames%delay)==1 is to slow down the animation so its visible.

A good example of using this method is a javascript game engine i made source available here. https://github.com/Patrick-W-McMahon/Jinx-Engine