jquery - 水平頁面佈局 - 調光器

Question

我正在一個網站上工作。當您點擊滑動到您想要的頁面的導航時，佈局是水平的。這一切都有效，但我然後爲每個頁面添加了一個調光器，因此當您在您選擇的頁面上時，其他調光器會變暗。我想知道是否有更好的方法來編寫這段代碼，目前它是每個頁面的一個函數，我想知道是否有辦法縮短這個時間。

//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

至於蘇夫揚描述，您綁定的close事件和#fuzz多次這是沒有必要的。在關於調光器的代碼，你可以綁定在導航錨點擊功能由衰落隱藏的調光器，並且淡出當前調光器，像這樣：

$('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'); 
} 

這消除了所有其他的需要點擊你在錨上綁定的事件。

我已經更新了你的jsfiddle以行動表達這一點：http://jsfiddle.net/uQH37/1/

Answer 2

試試這個，我刪除了額外的document.ready（），關閉函數。

$(document).ready(function() { 

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


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

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


}); 

//Adjust height of overlay to fill screen when browser gets resized 
$(window).bind("resize", function() { 
    $("#fuzz").css("height", $(window).height()); 
});​