jQuery Fade With AJAX

Hello,

Currently at my site http://imponenteweb.com/ I have it where when you click on a navigation link, it uses AJAX to load an HTML page with just the content into the left div. Also, when you load the main page, the content fades in using a jQuery fadein. In regards to that, I'd like it so that when you click a nav link, it fades in too using the same or similar method. You can look at the code on my page for more info. I have tried lots of methods to achieve this, but none have worked. Any help would be appreciated.

Thanks!

Anthony

 

Since you are using the jQuery framework, you dont need the ajax framework from Dynamic Drive.

I replaced all the script from your page and added the following code with jquery in the head node of your page

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">
 
jQuery.noConflict();

// this is for the first fade in when page loads
jQuery(function($){
 
	$('#left').fadeIn(2000);
	$('#right').fadeIn(2000);
 
}); 

// this is for subsequent ajax page loads
var ajaxpage = function( url, containerid ) {
	jQuery.ajax( { 
		url: url,
		success: function( data, textStatus, XMLHttpRequest ) {
			jQuery("#" + containerid).fadeOut( 2000 , function() {
				jQuery(this).html( data );
				})
				.fadeIn( 2000 );
			},
		error: function( XMLHttpRequest, textStatus, errorThrown ) {
			alert( "XMLHttpRequest failed: " + errorThrown );
			}
		});
};
 
</script>

HTML:

and finally your html page looks like this View attachment index.html

 

This is awesome! Thank you very much!