Ajax transition loader. Advice on load out?

[themindco]

Hello,

I am creating a little script that allows me to scroll my content sections in and out though Ajax and CSS. I have have successfully made it slide in from the top but I have one problem, sliding out! I wrote a clip for 'aniOut' that works also but I cant seem to make one load before the other in transition. I am not very good with javas cript anyone have any suggestions? My site is live with the working slide in at The Mind Company. Also I am having a load issue with some browsers and computers where the page must be refreshed in order to view proper, any suggestions?

CSS:

header {
  z-index:100;
  position:relative;
  display: block;
  background-color: #272727;
  height:100px;}

#contentBody {
  min-height:48em;}

footer {
  position:relative;
  display: block;
  background-color: #272727;
  height:168px;  }

#aboutPage { 
  display:none;}

#productPage { 
  display:none;}

#contactPage { 
  display:none;}

.aniIn {
z-index:0;
-webkit-animation-name: ANIMATEin;
-webkit-animation-duration: 0.25s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in;
}

@-webkit-keyframes ANIMATEin {
from {
margin-top:-4000px;
}
to {
margin-top:0px;
}
}

.aniOut {
-webkit-animation-name: ANIMATEout;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in;
}
@-webkit-keyframes ANIMATEout {
from {
margin-top:0px;
}
to {
margin-top:3000px;
}
}

Script:

function $_(IDS) { return document.getElementById(IDS); }

function ani(){
	document.getElementById(classID).className ='aniOut';
}

function checkPage(classID, url){	
	var tmp = '';
	var sel = document.getElementsByTagName('section');
	for (var i=0; i<sel.length; i++){
		if (sel[i].id == classID) { tmp = 'block' } else { tmp = 'none' }
		$_(classID).className ='aniIn';
		sel[i].style.display = tmp;}
	$_(classID).style.display = 'block';	 
	loadContent(classID, url);  }
  
function loadContent (classID, url){
	var xmlhttp;
	if (window.XMLHttpRequest){
		xmlhttp=new XMLHttpRequest();}
	
	xmlhttp.onreadystatechange=function(){
		if (xmlhttp.readyState==4 && xmlhttp.status==200){
			document.getElementById(classID).innerHTML=xmlhttp.responseText;}}
		
	xmlhttp.open("GET","content/"+url,true);
	xmlhttp.send();}

HTML:

<!-- Header Areas: (Constent visual)--> 
<header>
	    <li><a href="#" onclick="checkPage('aboutPage', 'about.html');return false">About</a></li>
	    <li><a href="#" onclick="checkPage('productPage', 'projects.html');return false">Projects</a></li>
	    <li><a href="#" onclick="checkPage('contactPage', 'contact.html');return false">Contact</a></li>
</header>

<!-- Content Areas: (Variable visual)-->
<div id="contentBody">
    <section id="aboutPage"></section>
    <section id="productPage"></section>
    <section id="contactPage"></section>
</div>

<!-- Footer Area: (Constant visual)-->
<footer></footer>

[themindco]

I have posted a more complete question and examples of what I have attempted here:

http://stackoverflow.com/questions/9...-ajax-and-css3