javascript、jquery。不会淡出

Question

我是 javascript 和 jquery 的新手，所以，作为挑战，我今天正在做一些小游戏，运行解决这个问题。

因此，代码的工作方式如下：出现了一些文本，一段时间后它需要 fadeOut，但它不会 fadeOut 我...

这是我的代码：

var timeToStart = 3;      
var timer = 0;

function count() {            
    document.getElementById("gameStarter").innerHTML = timeToStart + " s";      
    timeToStart = timeToStart - 1;            
} 

$("#start").click(function() {            
    $("#gameStart").fadeIn(500, function() {        
        timer = setInterval(count, 1000);                
        setTimeout(function() {clearInterval(timer);}, 4000);       
        if (timeToStart == 0) {      
            $("#gameStart").fadeOut(500)            
        }                       
    });
});

Answer 1

（gcampbell 和 Patrick Evans 在评论中指出了这一点。由于他们还没有 post 回答，我将 post CW。）

你的代码在这里

timer = setInterval(count, 1000);

setTimeout(function() {clearInterval(timer);}, 4000);

if (timeToStart == 0) {

  $("#gameStart").fadeOut(500)

}

仅运行你的 if 语句一次，在一切完成之前运行ning。现在它通过它一次，当 timeToStart 仍然等于 3 时。我建议将你的 if 语句放在你的 count() 函数中，像这样

function count() {

  document.getElementById("gameStarter").innerHTML = timeToStart + " s";

  timeToStart = timeToStart - 1;

  if (timeToStart == 0) {

    $("#gameStart").fadeOut(500)

  }

}

因此它会在每次运行时检查它，而不是只检查一次。

实例：

$("#gameStart").hide();

var timeToStart = 3;

var timer = 0;

function count() {

  document.getElementById("gameStarter").innerHTML = timeToStart + " s";

  timeToStart = timeToStart - 1;

    if (timeToStart == 0) {

      $("#gameStart").fadeOut(500)

    }
}

$("#start").click(function() {

  $("#gameStart").fadeIn(500, function() {

    timer = setInterval(count, 1000);

    setTimeout(function() {
      clearInterval(timer);
    }, 4000);

  });

});

<div id="gameStarter"></div>
<div id="gameStart">This is gamestart</div>
<input type="button" id="start" value="Start">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

javascript、jquery。不会淡出

javascript, jquery. won't fadeOut

javascript

jquery

fadeout