jquery - 让一个 div 在 setinterval 上闪烁

Question

一个单独的 div 应该每秒闪烁一次。我知道它会改变颜色，但我不知道如何在 1 秒内将它变回原来的颜色。我希望每个随机 div 在打开的窗口上显示绿色而不是黄色而不是回到绿色。然后转到下一个随机div

$(document).ready( function(){
    var $div
    for(var i = 0; i < 30 ; i++){
        $div = $("<div>", {class: "a lime" })
        $(".container").append($div)
    }
    console.log($(".a").eq(1))
    var random
    setInterval(function(){

    for(var i = 0; i < $(".a").length && (i % 4 == 0); i ++){
        random = Math.floor(Math.random() * $(".a").length)
        var saved  = random;

            // if(i % 2 == ){
                if($(".a").eq(saved).hasClass("lime")){
                    //!!!make it so that after changing to yellow so that it changes to green.
                         lime class is green!!!
                    $(".a").eq(saved).removeClass("lime").addClass("yellow")
                }else if ($(".a").eq(saved).hasClass("yellow")){
                    $(".a").eq(saved).removeClass("yellow").addClass("lime")
                }
                // $(".a").eq(saved).toggleClass("yellow")
                // $(".a").eq(saved).toggleClass("lime")
            // }


    }
    }, 1000)
});

Answer 1

也许是这样的:

HTML

<div class="green"></div>
<div class="green"></div>
<div class="green"></div>

CSS

div {
    height: 20px;
    width: 20px;
    border: 1px solid black;
}

.green {
    background: green;
}

.yellow {
    background: yellow;
}

JavaScript

var $divs = $('div');
var totalDivs = $divs.length;

function blinkRandomDiv() {
    var random = Math.floor((Math.random() * totalDivs));
    var randomDiv = $divs.eq(random);

    $divs.removeClass('yellow').addClass('green');

    randomDiv.toggleClass('green yellow');
}

setInterval(blinkRandomDiv, 1000);

用 fiddle :http://jsfiddle.net/39mfrf6m/8/ .