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(), close 関数を削除しました。

$(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 に答える