Сделайте div мигать на setinterval

Раз в секунду должен мигать отдельный 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)
});

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

С скрипкой: http://jsfiddle.net/39mfrf6m/8/.

Другие вопросы по тегам