CODEWITHSUNDEEP
javascriptc#jqueryasp.net
Nicholas Aysen
Nicholas Aysen

Reputation: 580

How do I hide a div or image after 20 seconds of flashing in Javascript?

I am busy making a memory game, where an image is to be displayed to the user, and after some 10 seconds of the image flashing, it should hide and four options are to be shown for the user to choose either the correct or incorrect answer.

So far, all I have accomplished is to load the images and cycle through all the puzzles that my code can find. What I'm trying to do now is to make the image flash and hide after some time, while also just refreshing that section of the page, and not the entire page.

I am using C# and a user control on my page. What I have tried so far is only

<script> 
var x;
function BlinkImage() {
    x = 1;
    setInterval(change, 2000);
}

function change() {
    if (x === 1) {
        var image = document.getElementById('<%=imgMain.ClientID %>');
        image.visible = false;
        x = 2;
    }
    else {
        var image = document.getElementById('<%=imgMain.ClientID %>');
        image.visible = true;
        x = 1;
    }
}
</script>

And on loading my puzzle for that instance (in code behind)

Page.ClientScript.RegisterStartupScript(typeof(game), "Start", "<script language=javascript> BlinkImage(); </script>");

Which does fire, as I can step through the code in debugging on Firefox. But my image does not flash or blink. I understand I am just using visiblity as my "blinker". I don't know what else to use exactly.

What can I do to make the image flash or blink for, say 20 seconds, then hide the image after that time has passed? Then repeat the process once the user has made a choice.

Upvotes: 2

Views: 268

Answers (3)

Pete
Pete

Reputation: 58432

You can try the following (comments in code):

var blinkInterval = setInterval(change, 2000),   // set the interval into a variable
    image = document.getElementById('test'),     // replace test with your client id: <%=imgMain.ClientID %>
    x = 1;

function change() {
    if (x % 2 === 1) {  // see if it is odd or even by modding by 2 and getting remainder
        image.style.display = 'none';
    } else {
        image.style.display = 'block';
    }
    
    x++; // increment x
    
    if (x === 10) {  // should have happened 10 times (which is 20 seconds with your intervals being at 2 seconds)
      clearInterval(blinkInterval); // clear the interval (should end hidden as odd is display none and we clear beforethe 20th is run)
    }
}
<div id="test">test</div>

After the code has finished, wherever the user is making their selection, you just need to reset the blinkInterval variable:

blinkInterval = setInterval(change, 2000); // notice no need for the var declaration when you reset this

Upvotes: 1

Sulaiman Adewale
Sulaiman Adewale

Reputation: 112

Try this:

function flashAndHide(img_id){
var img = $("#"+img_id);
var x = 0;
var inter = setInterval(function(){

if(x % 2 == 0){
img.hide();
}else{
img.show();
}
x += 1;
}



},1000);

if(x === 20){
img.hide();
clearInterval(inter);
}

  }

Haven't tested this, but it should work,

Upvotes: 0

Love-Kesh
Love-Kesh

Reputation: 812

Use style attribute and change if visible/hidden

function change() {

var image = document.getElementById('<%=imgMain.ClientID %>');

    //check if visible   
    if (image.style.visibility=="visible") {

       image.style.visibility="hidden";
    }
    else {
       image.style.visibility="visible";
    }
}

;

Upvotes: 1

Related Questions