JQuery Div Fade in and out on change

Question

I have a website coded with php and html and a certain div displays content as an includes file, based on which link is clicked in the navigation menu. I am able to have the content fade in using jQuery, but I would also like the content before it to fade out before the new content fades in. For the fade in I have:

    $(document).ready(function(){
    $(".fade").hide(0).delay(0).fadeIn(3000)
    }); 

This code is right within the div and only affects the div of course. What do I need to do in order to have the previous content fade out? here's a jsfiddle:

http://jsfiddle.net/tanusgreystar/vacqz/

thanks

Answer 1

This will not be easy because i have no idea how much knowledge in can assume. Currently you have different 'fullpage' Requests to load the pages:

• index.php?page=home
• index.php?page=contact
• index.php?page=about

I do not know any way to control the fading between page navigation (and i believe there is none).

Since the content is not that big you could load the content for every page (home, contact, about) with the first request and change the links at your footer to be internal / anchor links. If the user clicks on a link a javascript function fades the current content out and fades the new content in. To avoid that the other content is displayed every surrounding div would be invisible at the initial load.

Another approach would be to use ajax. Instead of loading a full page only the content would be loaded. The approach would be the same. The links in the footer have an event listener attached and load the needed content.

The following is some close to real pseudo-code:

   function OnLinkClicked(anchor){
        $(".content").fadeOut(); // every div with class content gets faded out
        var divId = "#" + anchor;
        $(divId).fadeIn(); // the anchorId is passed into the function 
                           // to fadeIn the new content
   }

The links a the footer could look like this

<a href="#home" onclick=OnLinkClicked("home")>home</a>
<a href="#about" onclick=OnLinkClicked("about")>about</a>

The three pages would be send to the page in different divs

 <div id="home" class="content isVisible">... content for home ...</div>
 <div id="about" class="content isHidden">... content for about ...</div>
 <div id="contact" class="content isHidden">... content for contact...</div>

Hop that this will help you get started.