title: How do I hide a div or image after 20 seconds of flashing in Javascript?
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>I am using C# and a user control on my page. 
  What I have tried so far is only</p>
  
  <pre><code>&lt;script&gt; 
  var x;
  function BlinkImage() {
      x = 1;
      setInterval(change, 2000);
  }
  
  function change() {
      if (x === 1) {
          var image = document.getElementById('&lt;%=imgMain.ClientID %&gt;');
          image.visible = false;
          x = 2;
      }
      else {
          var image = document.getElementById('&lt;%=imgMain.ClientID %&gt;');
          image.visible = true;
          x = 1;
      }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>And on loading my puzzle for that instance (in code behind)</p>
  
  <pre><code>Page.ClientScript.RegisterStartupScript(typeof(game), "Start", "&lt;script language=javascript&gt; BlinkImage(); &lt;/script&gt;");
  </code></pre>
  
  <p>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. </p>
  
  <p>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.</p>