CSS 和 Javascript。需要让 div 闪烁

Question

我需要让 div 闪烁，当我在开发模式下执行下面的代码时，它可以工作。但是当代码实时执行时，它就不起作用了。为什么？

这是一个Fiddle，它不起作用但包含所有代码。

所有代码都是javascript：

var jogo = {
    i : 0,
    pintado : new Array(),
    click : -1,
    momento: 0,
    rolando : false,

    sleep: function(milissegundos){
        var iniciar = new Date().getTime();
        for(var i = 0; i < 1e7; i++){
            if((new Date().getTime() - iniciar) > milissegundos){
                break;
            }
        }
    }    
}

function position(){
    var theight = $(window).height();
    var twidth = $(window).width();
    var cheight = $('#por2').height();
    var cwidth = $('#por2').width();

    var margint = (theight - cheight)/2;
    var marginl = (twidth - cwidth)/2;

    $('#por2').css('margin-top', margint);
    $('#por2').css('margin-left', marginl);

    var bwidth = $('#jogar').width();
    var bmarginl = (twidth - bwidth)/2;
    $('#jogar').css('margin-left', bmarginl);
}

function pintar(){
    var random = 0;

        while(random <= 0){ //RANDOMIZA UM NÚMERO PARA PINTAR UMA BOLINHA
            random = Math.floor((Math.random()*5));
        }

        if(jogo.rolando){ // CASO O JOGO JÁ ESTEJA EM ANDAMENTO
            var aux = 0;
            while(jogo.pintado.length > aux){ 
                //PINTA AS BOLAS QUE JÁ FORAM PINTADAS ANTES
                switch(jogo.pintado[aux]){
                    case 1:
                        $('#1').css('background','rgb(255,0,0)');
                        jogo.sleep(500);
                        $('#1').css('background', 'rgb(10,10,10)');
                    break;    

                    case 2:
                        $('#2').css('background','rgb(0,255,0)');
                        jogo.sleep(500);
                        $('#2').css('background', 'rgb(10,10,10)');
                    break;

                    case 3:
                        $('#3').css('background','rgb(0,0,255)');
                        jogo.sleep(500);
                        $('#3').css('background', 'rgb(10,10,10)');
                    break;

                    case 4:
                        $('#4').css('background','rgb(255,255,255)');
                        jogo.sleep(500);
                        $('#4').css('background', 'rgb(10,10,10)');
                    break;
                }
                aux++;
            }

            // PINTA UMA BOLA COMO SE FOSSE A PRIMEIRA
            // AÇÃO PORÉM INCREMENTA O JOGO.I
            setTimeout(function(){
                switch(random){
                    case 1:
                        $('#'+random).css('background','rgb(255,0,0)');
                        setTimeout(function(){
                            $('#'+random).css('background', 'rgb(10,10,10)');
                        },200);
                        jogo.i++;
                        jogo.pintado[jogo.i] = random;
                    break;
                    case 2:
                        $('#'+random).css('background','rgb(0,255,0)');
                        setTimeout(function(){
                            $('#'+random).css('background', 'rgb(10,10,10)');
                        },200);
                        jogo.i++;
                        jogo.pintado[jogo.i] = random;
                    break;
                    case 3:
                        $('#'+random).css('background','rgb(0,0,255)');
                        setTimeout(function(){
                            $('#'+random).css('background', 'rgb(10,10,10)');
                        },200);
                        jogo.i++;
                        jogo.pintado[jogo.i] = random;
                    break;
                    case 4:
                        $('#'+random).css('background','rgb(255,255,255)');
                        setTimeout(function(){
                            $('#'+random).css('background', 'rgb(10,10,10)');
                        },200);
                        jogo.i++;
                        jogo.pintado[jogo.i] = random;
                    break;
                }
            },400);
        }

        if(!jogo.rolando){ //CASO SEJA A PRIMEIRA VEZ DO JOGO
            switch(random){
            case 1:
                $('#'+random).css('background','rgb(255,0,0)');
                setTimeout(function(){
                    $('#'+random).css('background', 'rgb(10,10,10)');
                },200);
            break;
            case 2:
                $('#'+random).css('background','rgb(0,255,0)');
                setTimeout(function(){
                    $('#'+random).css('background', 'rgb(10,10,10)');
                },200);
            break;
            case 3:
                $('#'+random).css('background','rgb(0,0,255)');
                setTimeout(function(){
                    $('#'+random).css('background', 'rgb(10,10,10)');
                },200);
            break;
            case 4:
                $('#'+random).css('background','rgb(255,255,255)');
                setTimeout(function(){
                    $('#'+random).css('background', 'rgb(10,10,10)');
                },200);
            break;
            }
            jogo.rolando = true;
            jogo.pintado[jogo.i] = random;
        }

        jogo.click = -1;    
}

function clicar(valor){
    jogo.click++;
    if(jogo.pintado[jogo.click] == valor){
        if(jogo.i == jogo.click){
            pintar();
        }
    }else{
        alert('perdeu');
    }    
}

Answer 1

我不知道你的类 jogo 是做什么的，但是在 JavaScript 中，睡眠是很复杂的。所以我建议使用回调，类似这样：

$("#1").animate({
    background: "rgb(255,0,0)"}, 500, function(){
     $("#1").animate({background: "rgb(10,10,10)"}, 500);
    }
);