css不透明度在setTimeOut中没有变化

时间:2017-08-31 21:57:38

标签: javascript css settimeout

我试图制作一个西蒙游戏,这里是codepen中的代码。 问题是代码执行时不透明度没有改变。 html文本发生了变化,但不透明并没有变得非常奇怪。 谁能指出我做错了什么?代码在第31行。

$(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));
  }
};  
})

1 个答案:

答案 0 :(得分:0)

并不是它不起作用,而是你将不透明度设置为1,同时将其设置为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也行,并不影响

如果你想在第一个计时器之后启动第二个计时器,你需要把它放在第一个回调中:

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也行,并不影响