0

我正在做一个网站。当您单击导航时，布局是水平的，它会滑动到您想要的页面。这一切都有效，但我随后为每个页面添加了一个调光器，因此当您在所选页面上时，其他页面会变暗。我想知道是否有更好的方法来编写这段代码，目前它是每个页面的一个函数，我想知道是否有办法缩短它。

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

});
4

2 回答 2

0

试试这个，我删除了额外的 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());
});​
于 2012-05-29T07:03:07.773 回答
0

正如 Sufyan 所描述的，您绑定了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/

于 2012-05-29T07:39:58.047 回答