Simple Fade in using Javascript

Here is an easy to implement snippet of code that will allow you to fade in certain divs of your site.  You can use this for blocks of content or to fade in your entire page as it loads on your site.

Put the following snippet into the header of your site:

        <?php /// Code for Page Fade /// ?>
<script type="text/javascript">
	$(document).ready(function() {
		$("#content").css("display", "none");
		$("#content").fadeIn(1000);
		$("a.transition").click(function(event){
			event.preventDefault();
			linkLocation = this.href;
			$("#content").fadeOut(1000, redirectPage);		
		});
		function redirectPage() {
			window.location = linkLocation;
		}
	});
</script>
<?php /// End Code for Page Fade /// ?>

You may need to move the snippet up or down in your header area depending on what it ends up conflicting with.  To get it to work make sure #content is replaced with the id of the div you want to fade in and out. The “fadeIn” number that is set to 1000 in the example above tells the script how quickly to fade in.  The larger the number the longer the fade. To see this in action check out http://www.pacificfence.com. Enjoy!