淡出内容区域，但留下导航栏/页眉&页脚总是在那里

Fade away content area, but leave nav bar/header & footer always there

本文关键字：页眉 在那里 导航 区域 淡出      更新时间：2023-09-26

我有麻烦与我的网页(我刚刚开始学习CSS和HTML，所以我需要解释，如果可能的话)我的网页有一个标题，很像一个Stackoverflow。我把它固定在顶部，用它作为导航栏来改变页面。我想淡化页面上的内容，但让导航栏保持原样。我也想对页脚做同样的事情。我不确定如何排除这些因素的影响。我让它工作，但它会褪色整个页面。

请帮忙!

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("body").css("display", "none");
    $("body").fadeIn(1100);
    $("a.transition").click(function(event){
        event.preventDefault();
        linkLocation = this.href;
        $("body").fadeOut(1000, redirectPage);      
    });
    function redirectPage() {
        window.location = linkLocation;
    }
});
</script>

使用jQuery的渐变方法。

http://jsbin.com/mujuzori/2/edit

HTML: 

<body>
<header>My Header</header>
<nav>Click here to make content disappear</nav>
<div>My Content</div>
<footer>My Footer</footer>
</body>
Javascript: 

$(document).ready(function(){  
    $("nav").click(function(){
        $("div").fadeOut();
    });  
});
相关文章：