Сделайте 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/.