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