HTML-Code:
<html>
<head>
<title>Test</title>

<style>
#Wrapper{ position:relative; height:20px; width:110px; text-align:right; }
#lightsOff, #lightsOn{ color:#666; position:relative; }
#lightsOn { display:none; }
#Main { background:#000; height:100%; width:100%; position:fixed; left:0px; top:0px; display:none; }
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script>

$(document).ready(function() {

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

$("div#Main").css({opacity: 0, display: "block"}).animate({opacity: 0.9},500);
$("#lightsOff").fadeOut(500);
$("#lightsOn").fadeIn(500);

return false;

});

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

$("div#Main").fadeOut(500);
$("#lightsOn").fadeOut(500);
$("#lightsOff").fadeIn(500);

return false;

});

});


</script>

</head>

<body>

<div id="Main"></div>

<div id="Wrapper">
<a href="#" id="lightsOff">Turn off the lights!</a>
<a href="#" id="lightsOn">Turn on the lights!</a>
</div>

</body>
</html>
Demo:
Test