添加淡入，淡出昏暗的燈光 - JavaScript/css

Question

嗨，我正在尋找一個答案淡入淡出和\「暗淡的燈光」功能。下面是一些編碼;

<!--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 == 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> 

還有更多的，但如果你訪問http://www.ittookamiracle.ca/'11daniel.htm因爲它是如何工作的例子，編碼需要回答我的問題的任何其他細節。

感謝您花時間查看此信息。

乾杯，

傑森。

Answer 1

這是一個tutorial關於如何使用閃光燈和jquery製作昏暗的燈光按鈕。

這是demo page demoing腳本