Question

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.

//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;
});  

});

Answer 1

As Sufyan described, you bound the close events and #fuzz multiple times which wasn’t necessary. In regards to the dimmer code, you can just bind that in the navigation anchor click function by fading in the hidden dimmer, and fading out the current dimmer, like so:

$('ul.nav a').bind('click', function(event) {
    ...

    // show hidden dimmer
    $('.dimmer:hidden').fadeIn('slow');

    // fade out current dimmer
    $($anchor.attr('href')).find('.dimmer').fadeOut('slow');
}

This removes the need for all the other click events you bound on the anchors.

I’ve updated your jsFiddle to show this in action: http://jsfiddle.net/uQH37/1/