Fade Out Then FadeIn

Hello i am trying to get my code to fade out then back in after the animation. Right now it does the animation then does the fading but i need it to happen during the animation to.

$(document).ready(function() {
	
	// runs when an h2 heading is clicked
	$("#faqs h2").toggle(
		function() {
			$(this).toggleClass("minus");
		    $(this).next().show(2000);
	    },
	    function() {
	        $(this).toggleClass("minus");
	        $(this).next().hide(2000);
	    }
    ); // end toggle
    
    // runs when the page is ready
    $("#faqs h1").animate( { fontSize: "650%", opacity: 1, left: "+=375" }, 1000 )  
		         .animate( { fontSize: "175%", left: "-=200" }, 1000 );
		    
	// runs when the top-level heading is clicked
	$("#faqs h1").click(function() {
		$(this).animate( { fontSize: "650%", opacity: 1, left: "+=375" }, 2000 )  
			   .animate( { fontSize: "175%", left: "-=200" }, 1000 );
			   function() {
			   		$("#faqs h1").fadeOut(2000).fadeIn(1000);
			   }
			  
	}); // end click
    
    $("#faqs").click(function() {
    	$(this).fadeOut(2000).fadeIn(1000);
    })
}); // end ready

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
    <title>FAQs</title>
	<link rel="shortcut icon" href="images/favicon.ico">
	<link rel="stylesheet" href="main.css">
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
   	<script src="faqs.js"></script>   	
</head>

<body>
	<section id="faqs">
		<h1>jQuery FAQs</h1>
		<h2>What is jQuery?</h2>
		<div>
			<p>jQuery is a library of the Javascript functions that you're most likely 
			   to need as you develop web sites.
			</p>
		</div>
		<h2>Why is jQuery becoming so popular?</h2>
		<div>
			<p>Three reasons:</p>
			<ul>
				<li>It's free.</li>
				<li>It lets you get more done in less time.</li>
				<li>All of its functions are cross-browser compatible.</li>
			</ul>
		</div>
		<h2>Which is harder to learn: jQuery or Javascript?</h2>
		<div>
			<p>For most functions, jQuery is significantly easier to learn 
			    and use than Javascript. But remember that jQuery is Javascript.
			</p>
		</div>
		<br><br>
		<p><a href="http://jqueryui.com/effect/#easing" target="_blank">Review jQuery UI easings in a new window or tab</a></p>
	</section>
</body>
</html>

CSS

/* type selectors */
article, aside, figure, figcaption, footer, header, nav, section {
    display: block;
}
* {
	margin: 0;
	padding: 0;
}
body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 87.5%;
	width: 650px;
	margin: 0 auto;
	border: 3px solid blue;
}
section {
	padding: 15px 25px;
}
#faqs h1 { 
	position: relative;
	left: -175px;
	font-size: 75%;
	opacity: .2;
	color: blue;
}
h2 {
	font-size: 120%;
	padding: .25em 0 .25em 25px;
	cursor: pointer;
	background: url(images/plus.png) no-repeat left center;
}
h2.minus {
	background: url(images/minus.png) no-repeat left center;
}
div {
	display: none;
}
div.open {
	display: block;
}
ul {
	padding-left: 45px;
}
li {
	padding-bottom: .25em;
}
p {
	padding-bottom: .25em;
	padding-left: 25px;
}