Untitled

javascript, html5 simulate video game HUD effect

<li><a href="#target" id="about">About</a></li>

       

<div id="overlay">

<a href="#" class="btn" id="close">X</a>

    <h3>Overlay</h3>

    Fusce commodo congue ante, quis venenatis nibh blandit ut. Aenean felis est, dictum eget venenatis ac,vestibulum vel urna. Quisque felis metus, vehicula et semper quis, fermentum a dolor.  

    </div>

       

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

    //alert("Handler for .click() called.");

 

    // set interval

     var timeCount=0;

    setInterval(function() {

 

 

        if(timeCount == 1){

        //alert("timeCount"+ timeCount);

          $('#overlay').toggle();

        }

        if(timeCount == 2){

        //alert("timeCount"+ timeCount);

          $('#overlay').toggle();

        }

        if(timeCount == 3){

        //alert("timeCount"+ timeCount);

          $("#overlay").fadeIn("slow");

        }

        if(timeCount == 4){

          //abortTimer();

        }

        timeCount++;

      }, 50);

      });

       

if( timeCount < 4) $("#overlay").toggle();

else {

    $("#overlay").fadeIn("slow");

    clearInterval(timer);

}