在特定时间段内使用JavaScript更改HTML元素的背景颜色？

Question

我有大约26个html元素，我想在JavaScript中获得以下效果：

是否可以制作这样的东西？

我试图这样做：

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

我是JavaScript的新手，从未与计时器合作过。

Answer 1

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（）平均会给你一致的~60fps。当没有显示选项卡时，它也会停止动画循环。显示选项卡时动画开始。 (frames%delay)==1会减慢动画的速度，使其可见。

使用此方法的一个很好的例子是我在这里提供的javascript游戏引擎。 https://github.com/Patrick-W-McMahon/Jinx-Engine

Answer 2

我使用jQuery.animate函数构建了一个小小提示示例，并使用jQuery颜色插件创建了背景颜色的淡入淡出动画。

请在此处找到小提琴：http://jsfiddle.net/nafm74yd/15/

请注意，jsfiddle的左侧面板中有一个外部资源...它指向其CDN的jQuery颜色插件。

脚本是这样的：

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