Very simple jQuery overlay
<p>I'm putting together a fixed, one-page site that deploys an overlay using jQuery. There are two elements that make up the overlay:</p>

<ul>
<li>#transparent-overlay - a div that covers the entire browser window</li>
<li>#about-wrapper - a pop-up div displayed in the centre of the browser window, containing text</li>
</ul>

<p>Both of these divs are hidden on page load and have opacity: 0.</p>

<p>These two lines of jQuery switch on the overlay:</p>

<pre><code>$('#transparent-overlay').show().fadeTo(200, 0.5);
$('#about-wrapper').delay(200).show().fadeTo(170, 1.0);
</code></pre>

<p>I currently can't work out how to put together the jQuery that will switch off the overlay - i.e., return these elements to the state they were in on page load - anyone got any ideas?</p>

<p><strong>Edit following Karim's suggestion below:</strong></p>

<p>The .js file now reads as follows:</p>

<pre><code>$(document).ready(function() {
   about_click();
   about_close();
 });

function about_click() {
   $('#about').click( function() { 
      $('#transparent-overlay').show().fadeTo(200, 0.5);
      $('#about-wrapper').delay(200).show().fadeTo(170, 1.0);
   }); 
}

function about_close() {
   $('#about-close').click( function() {
      $('#about-wrapper').hide();
      $('#transparent-overlay').fadeOut(200);
   });
}
</code></pre>

<p>This loads the overlay perfectly, and then hides it perfectly. However, when I go to re-load the overlay, both #about-wrapper and #transparent-overlay snap back in to place rather than - in the case of #transparent-overlay - fading in.</p>

<p>What's the best way to go about fixing this, please?</p>
