Apply Effects to Ajax Function

ajax-replace-fx.js

$('a').click(function(e){
	e.preventDefault();
	var theUrl = $(this).attr('href');
	$.ajax({
		url: theUrl,
		success: function(data){
			var theTemplate = $(data);
			$('.containerDiv').html(theTemplate);
		}
	});	
});

You could do something like this.

$('a').click(function(e){
e.preventDefault();
var theUrl = $(this).attr('href');
$.ajax({
url: theUrl,
success: function(data){
var theTemplate = $(data);
var duration = 500;

        $('.containerDiv').hide().html(theTemplate).fadeIn(duration);
    }
}); 

});

$('a').click(function(e){
    e.preventDefault();
    var theUrl = $(this).attr('href');
    $.ajax({
        url: theUrl,
        success: function(data){
            var theTemplate = $(data);
            var duration = 500;

            $('.containerDiv').hide().html(theTemplate).fadeIn(duration);
        }
    }); 
});

This will fadeout your content.

$('a').click(function(e){
    e.preventDefault();
    var theUrl = $(this).attr('href');
    $.ajax({
        url: theUrl,
        success: function(data){
            var theTemplate = $(data);
            var duration = 500;

            $('.containerDiv').fadeOut(duration, function() {
                $(this).hide().html(theTemplate).fadeIn(duration);
            });
        }
    }); 
});

$('a').click(function(e){
    e.preventDefault();
    var theUrl = $(this).attr('href');
    $.ajax({
        url: theUrl,
        success: function(data){
            var theTemplate = $(data);
            var duration = 500;

            $('.containerDiv').children().fadeOut(duration, function() {
                $('.containerDiv').children().html(theTemplate).fadeIn(duration);
            });
        }
    }); 
});

You can add a selector to the children() method like so:

.children('.some-selector')

Looks good, with one adjustment:

$('a').click(function(e){
    e.preventDefault();
    var theUrl = $(this).attr('href');
    $.ajax({
        url: theUrl,
        success: function(data){
            var theTemplate = $(data);
            var duration = 500;

            $('.containerDiv').children().fadeOut(duration, function() {
                $('.containerDiv').html(theTemplate).fadeIn(duration);
            });
        }
    }); 
});

The fadeIn doesn't appear to be working, though. The content appears, it just doesn't fade-in.

Try this

$('a').click(function(e){
    e.preventDefault();
    var theUrl = $(this).attr('href');
    $.ajax({
        url: theUrl,
        success: function(data){
            var theTemplate = $(data);
            var duration = 500;

            $('.containerDiv').children().fadeOut(duration, function() {
                $('.containerDiv').hide().html(theTemplate).fadeIn(duration);
            });
        }
    }); 
});

Yup, that works!

Why doesn't this work (the content is replaced but the fades don't work)?:

$('a').click(function(e){
    e.preventDefault();
    var theUrl = $(this).attr('href');
    $.ajax({
        url: theUrl,
        success: function(data){
            var theTemplate = $(data);
            var duration = 500;

            $('.containerDiv').children().fadeOut(duration);
            $('.containerDiv').html(theTemplate).fadeIn(duration);
        }
    }); 
});

The fadeOut method is getting triggered, then immediately after, the fadeIn method is triggered. You need to use the fadeOut callback method so you trigger the fadeIn after the fadeOut is complete.

ah ok, that makes sense. The fadeIn starts after the previous event begins not ends. Thanks!