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

By : Neroh
Source: Stackoverflow.com
Question!

I'm having trouble with my webpage (I'm just starting to learn CSS and HTML so I need explanations if possible) My webpage has a header, much like the one of Stackoverflow. I have it fixed to the top and use it as a nav bar to change through pages. I'd like to fade the content on the page, but have the nav bar stay how it is. I'd like to do the same with the footer too. I'm not sure how I'd go about excluding these elements from being effected. I have it working but it will fade the entire page.

Please help!

<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>
By : Neroh


This video can help you solving your question :)
By: admin