jquery - horizontal page layout - dimmer
<p>I am working on a website. The layout is horizontal when you click on the navigation it slides to the page you want. That all works but I then added a dimmer to each page so when you are on the  your selected page the others are dimmed out. I was wondering if there is a better way to write this code, at the moment it is a function for each page and I wanted to know if there is a way to shorten this.</p>

<pre><code>//When the link that triggers the message is clicked fade in overlay/msgbox  
$(".test").click(function(){  
$(".dimmerservices").fadeOut('slow', function() {
// Animation complete.
});  
$(".dimmerother1").fadeIn('slow', function() {
// Animation complete.
});  
return false;  
});  

//When the message box is closed, fade out  
$(".close").click(function(){  
$("#fuzz").fadeOut();  
return false;  
});  

});  

$(document).ready(function(){  

//Adjust height of overlay to fill screen when page loads  
$("#fuzz").css("height", $(document).height());  

//When the link that triggers the message is clicked fade in overlay/msgbox  
$(".casestud").click(function(){  
$(".dimmercase").fadeOut('slow', function() {
// Animation complete.
});  
$(".dimmerother2").fadeIn('slow', function() {
// Animation complete.
});  
return false;  
});  

//When the message box is closed, fade out  
$(".close").click(function(){  
$("#fuzz").fadeOut();  
return false;
});  

});  

$(document).ready(function(){  

//Adjust height of overlay to fill screen when page loads  
$("#fuzz").css("height", $(document).height());  

//When the link that triggers the message is clicked fade in overlay/msgbox  
$(".aboutclick").click(function(){  
$(".dimmerabout").fadeOut('slow', function() {
// Animation complete.
});  
$(".dimmerother3").fadeIn('slow', function() {
// Animation complete.
});  
return false;  
});  

//When the message box is closed, fade out  
$(".close").click(function(){  
$("#fuzz").fadeOut();  
return false;
});  

});  

$(document).ready(function(){  

//Adjust height of overlay to fill screen when page loads  
$("#fuzz").css("height", $(document).height());  

//When the link that triggers the message is clicked fade in overlay/msgbox  
$(".contactbutton").click(function(){  
$(".dimmerend").fadeOut('slow', function() {
// Animation complete.
});  
$(".dimmerother4").fadeIn('slow', function() {
// Animation complete.
});  
return false;  
});  

//When the message box is closed, fade out  
$(".close").click(function(){  
$("#fuzz").fadeOut();  
return false;
});  

});
</code></pre>
