Adding fade in, fade out to dim light - javascript/css

Hi I am looking for an answer to the fading in and\or out, of the feature "Dim Lights". Here below is some coding;

<!--HEAD-->

<script type="text/javascript" src="js/embeddedcontent.js" defer="defer"></script>
<script type="text/javascript">
  var dimmed = 0;
  function toggleLights()
  {
    var dimmer = document.getElementById("dimmer");
    if(dimmed == 0) dimmed = 1;
    else dimmed = 0;

    if(dimmed开发者_如何学Python == 1)
    {
        dimmer.style.opacity = 1.0;
        dimmer.style.visibility = "visible";
    }

    if(dimmed == 0)
    {
        dimmer.style.opacity = 0.0;
        dimmer.style.visibility = "hidden";
    }
  }
  </script>
 <style type="text/css">
  .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;
  }
  </style>

<!--BODY-->

    <div id="dimmer" onclick="toggleLights()"></div>
    Click to<a href="javascript:toggleLights();"><b> Dim the Lights</b></a>

There is more to it but if you visit http://www.ittookamiracle.ca/'11daniel.htm as an example of how it works and any other detail of coding needed to answer my question.

Thank you for taking your time to look in to this.

Cheers,

Jason.

Here is a tutorial on how to make a dim the light button using flash and jquery.

This is the demo page demoing the script