css opacity n'a pas changé dans setTimeOut

Question

J'essaie de faire un jeu Simon et voici le code dans le codepen. Le problème est que l'opacité n'a pas changé pendant l'exécution du code. Il est assez étrange que le texte html ait été modifié mais pas l'opacité. Quelqu'un peut-il indiquer où j'ai mal fait? le code est en ligne31.

$(document).ready(function(){ 
    $(".sw-slot").click(function(){ 
    $("#pwr-sw").toggleClass('sw-on'); 
    $('.count').toggleClass('led-off'); 
    if($("#pwr-sw").hasClass("sw-on")) 
    { 
     $("#start").click(function(){ 
     console.log("game started"); 
     var myGame= new Game(); 
     var gameCount = 3; 
    //computer move 

     for (var i = 1; i <= gameCount; i++) { 
      (function() { 
       var j = i; 

      var currentArray = myGame.computer.slice(0, gameCount); 
       var sectornumber = currentArray[j-1]; 

      setTimeout(function timer() { 
        console.log("now 0.5"); 
        $(".count").text(j);     
        $("#sector-"+sectornumber).css('opacity', 0.1); 
       },j*2000); //这一行将i*1000改为j*1000也行，并不影响 
       setTimeout(function timer1() { 
        console.log("now 1"); 
        $("#sector-"+sectornumber).css('opacity', 1); 
       },j*2000); //这一行将i*1000改为j*1000也行，并不影响 
      })(); 
     } 
     console.log("TIMEOUT FISNIHED") 
    //waiting for user input 
     }) 



    } 
    else 
    { 
     console.log("game ended"); 
    } 
}) 

function Game(){ 
    this.computer=[ ]; 
    this.userInput=[ ]; 
    for(var i =0;i<20;i++) 
    { 
     this.computer.push(Math.floor(Math.random() * 4)); 
    } 
}; 
}) 

Answer 1

Ce n'est pas que ça ne fonctionne pas, il est que vous définissez l'opacité à 1 en même temps que vous définissez à 0,1.

setTimeout(function timer() { 
    console.log("now 0.5"); 
    $(".count").text(j); 
    $("#sector-"+sectornumber).css('opacity', 0.1); 
},j*2000); //这一行将i*1000改为j*1000也行，并不影响 

setTimeout(function timer1() { 
    console.log("now 1"); 
    $("#sector-"+sectornumber).css('opacity', 1); 
},j*2000); //这一行将i*1000改为j*1000也行，并不影响 

Si vous voulez commencer la deuxième minuterie après la première, vous devez le mettre dans le premier rappel:

setTimeout(function timer() { 
    console.log("now 0.5"); 
    $(".count").text(j); 
    $("#sector-"+sectornumber).css('opacity', 0.1); 

    setTimeout(function timer1() { 
     console.log("now 1"); 
     $("#sector-"+sectornumber).css('opacity', 1); 
    },j*2000); //这一行将i*1000改为j*1000也行，并不影响 

},j*2000); //这一行将i*1000改为j*1000也行，并不影响