php - jquery, animating dynamic page load -

i want achieve that:

1. click on link in navbar
2. fadeout part of site,
3. load page link
4. animate wrap match new site height
5. fadein new content.

i found neat solution (here) this, site build in different way.

my index.php :

<?php  include ('includes/header.php'); echo '<div id="wrapper">';  if ($_get['page'] == 'about' ){     include 'includes/navbar.php';     include 'includes/about.php'; }else if ($_get['page'] == 'login' ){     include 'includes/navbar.php';     include 'includes/login.php'; }else if ($_get['page'] == 'register' ){     include 'includes/navbar.php';     include 'includes/register.php'; }else if ($_get['page'] == 'member-index'){     include 'includes/navbar.php';     include 'includes/member-index.php'; }else if ($_get['page'] == 'login-failed'){     include 'includes/navbar.php';     include 'includes/login-failed.php'; }else if ($_get['page'] == 'logout'){     include 'includes/logout-exec.php';     include 'includes/navbar.php';     include 'includes/logout.php'; }else if ($_get['page'] == 'register-success'){     include ('includes/navbar.php');     include 'includes/register-success.php'; }else if ($_get['page'] == 'access-denied'){     include 'includes/navbar.php';     include 'includes/access-denied.php'; }else {     include ('includes/navbar.php');     include 'includes/home.php'; }  echo '</div>'; include ('includes/footer.php'); ?> 

i reload navbar because it's changed in case if session present.

navbar.php

    <?php        //start session     session_start(); ?>  <div id="navbar">     <div class="button"><a href="index.php">home</a></div>     <?php          //check whether session variable sess_member_id present or not     if(!isset($_session['sess_member_id']) || (trim($_session['sess_member_id']) == '')) {         echo '<div class="button"><a href="index.php?page=login">login</a></div>';         echo '<div class="button"><a href="index.php?page=register">register</a></div>';     } else {         echo '<div class="button"><a href="index.php?page=logout">logout</a></div>';     }     ?>      <div class="button"><a href="index.php?page=member-index">member</a></div>     <div class="button"><a href="index.php?page=about">about</a></div>   </div> 

every page want load contains div in wrap other page elements, eg. about.php:

<div id="mainbody">     <h1>*.php</h1> </div> 

i want achieve effect described @ start of post site build way build now. in example mentioned, dynamic content loaded using .load() class. maybe should build site in different way, dunno im still php/jquery newb.

theres lot here, i'll try point in right direction.

if take step @ time we'll start navigation eventlistner.

$('#navbar div.button a').click(function(){  }); 

then want name of area/page clicked

$('#navbar div.button a').click(function(){    var pagename = $(this).attr('href').replace('index.php?page=','') // name }); 

then want grab remove old content append new 1 area. assuming pages loaded in hidden dive somewhere, try this.

$('#navbar div.button a').click(function(){        var pagename = $(this).attr('href').replace('index.php?page=','') // name         var newcontent = $('#'+ pagename).html();        $('#mainbody div#currentpagewrapper').fadeout(function(){         $(this).empty();        }); //clear old content         $('#mainbody div#currentpagewrapper').append(newcontent).fadein();      }); 

to pages dynamically can make ajax call (more on $.get() here

$.get('ajax/test.html', function(data) {   $('.result').html(data);   alert('load performed.'); }); 

so in example you're looking @ this

$('#navbar div.button a').click(function(){            var pagename = $(this).attr('href').replace('index.php?page=','') // name             //var newcontent = $('#'+ pagename).html(); //get preloaded  $.get(pagename + '.php', function(data) {      $('#mainbody div#currentpagewrapper').fadeout(function(){             $(this).empty();            }); //clear old content             $('#mainbody div#currentpagewrapper').append(data).fadein();   });         });