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

So currently you have a new pageload upon clicking a nav link? You would like the previous page's content to appear before fading in the content the new request has loaded? — Michael Berkowski, Jan 01 '14 at 02:04
...since it doesn't look like you're using AJAX to load in new content — Michael Berkowski, Jan 01 '14 at 02:05
I don't know how to use Ajax at all. I would like to fade out the content from the last request and fade in the new content. Here's a link to the actual website. www.lillianlotus.com. It doesn't have the fadeins but you can see the div where the content changes on the bottom left. — Matt Stacey, Jan 01 '14 at 02:15
You use [fadeout](http://api.jquery.com/fadeout/) for the div that should be faded out. But to be able to help you better i need to get an idea how much you know about javascript. My php is rusty and i could not find `$_GET[...]` in the documentatin. What does it do? — surfmuggle, Jan 01 '14 at 02:17
$_GET "gets" the value of the variable 'page' from the switch statement or if/else so it knows which includes file to load into the div. I know a bit about javascript but am a noob with jquery. I know I need to use fadeout() but I don't know the syntax to use in order for the div to fade out when it detects the content has changed. Is there an onchange() function for a div? — Matt Stacey, Jan 01 '14 at 02:21

score 0 · Accepted Answer · answered Jan 01 '14 at 02:47

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.

JQuery Div Fade in and out on change

1 Answers1