javascript, jquery. won't fadeOut

Question

I am new to javascript and jquery, so, as a challenge, I am doing little game and ran into the problem today.

So, the code works like: there appears some text and after some time it needs to fadeOut, but it just won't fadeOut for me...

Here's my code:

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

@T.J.Crowder Isn't `timeToStart` only being checked once, not after the countdown's finished? — gcampbell, Jul 09 '16 at 11:34
You are missing a semi colon after fade out? Checkout http://www.jslint.com to look for js errors online. — Nitin, Jul 09 '16 at 11:34
You realize your `if (timeToStart == 0) {` statement is only going to be executed once, when you click your start button, and not on every interval — Patrick Evans, Jul 09 '16 at 11:34
@gcampbell: Yeah, I got there (slowly). That's an *answer*, you should post it as one. — T.J. Crowder, Jul 09 '16 at 11:35
@PatrickEvans This might be a problem, how could I fix that? — David.Lithuania, Jul 09 '16 at 11:37
I don't get the voting on this question. It's clear, it shows code with effort... Asynchronous things are hard for newbies to learn. — T.J. Crowder, Jul 09 '16 at 11:37
@DovydasRamašauskas: Just move the check and the fadeout it triggers into `count`. — T.J. Crowder, Jul 09 '16 at 11:38
@T.J.Crowder Thank you, it finally works as it should. Cheers! — David.Lithuania, Jul 09 '16 at 11:40
@DovydasRamašauskas: Credit to gcampbell and Patrick Evans. I'm the one who misread it initially. :-) — T.J. Crowder, Jul 09 '16 at 11:41
Why did you erase your question? Don't you think somebody else might have the same question in the future? — maniak1982, Feb 16 '17 at 17:20

Tyler Chong · Accepted Answer · 2017-04-30T14:04:53.587

(gcampbell and Patrick Evans pointed this out in the comments. As they haven't posted an answer, I'll post a CW.)

Your code here

timer = setInterval(count, 1000);

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

if (timeToStart == 0) {

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

}

only runs your if statement once, before everything is finished running. Right now it passes over it once, when timeToStart still equals 3. I recommend putting your if statement inside of your count() function like this

function count() {

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

  timeToStart = timeToStart - 1;

  if (timeToStart == 0) {

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

  }

}

so it checks it every time its run, instead of only once.

Live Example:

$("#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. won't fadeOut

1 Answers1