title: Adding fade in, fade out to dim light - javascript/css
body: <p>Hi I am looking for an answer to the fading in and\or out, of the feature "Dim Lights". Here below is some coding;</p>
  
  <pre><code>&lt;!--HEAD--&gt;
  
  &lt;script type="text/javascript" src="js/embeddedcontent.js" defer="defer"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
    var dimmed = 0;
    function toggleLights()
    {
      var dimmer = document.getElementById("dimmer");
      if(dimmed == 0) dimmed = 1;
      else dimmed = 0;
  
      if(dimmed == 1)
      {
          dimmer.style.opacity = 1.0;
          dimmer.style.visibility = "visible";
      }
  
      if(dimmed == 0)
      {
          dimmer.style.opacity = 0.0;
          dimmer.style.visibility = "hidden";
      }
    }
    &lt;/script&gt;
   &lt;style type="text/css"&gt;
    .aboveDimmer
    {
      position:relative;
      z-index: 301;
    }
    #dimmer
    {
      position:fixed;
      left:0;
      top:0;
      width:100%;
      height:100%;
      float:left;
      z-index: 300;
      visibility:hidden;
      background-color:#000000;
    }
    &lt;/style&gt;
  
  &lt;!--BODY--&gt;
  
      &lt;div id="dimmer" onclick="toggleLights()"&gt;&lt;/div&gt;
      Click to&lt;a href="javascript:toggleLights();"&gt;&lt;b&gt; Dim the Lights&lt;/b&gt;&lt;/a&gt;
  </code></pre>
  
  <p>There is more to it but if you visit <a href="http://www.ittookamiracle.ca/%2711daniel.htm" rel="nofollow">http://www.ittookamiracle.ca/'11daniel.htm</a> as an example of how it works and any other detail of coding needed to answer my question.</p>
  
  <p>Thank you for taking your time to look in to this.</p>
  
  <p>Cheers,</p>
  
  <p>Jason.</p>