jQuery jquery .animate problems

[markdunbavan]

Hello.

I am trying to create multiple functions in jquery that slide pages up and down into view and then they load an external html page into them like so;

www.markdunbavan.co.uk/dev/OS

The problem I am having is creating the transitions that are for each link to work independently yet have the same effect. I see there are 2 options; 1 to go with what I have now and figure out how to get around it or 2 use the jquery switchClass to create the transitions but then how would that manifest the .load function in it. Here is the jquery I use;

$(function() {
    $('.log').ajaxStart(function() {
        $(this).text('');
    });
    $('#contactbutton').click(function() {
        loadContent('.result', 'contact.html', '#contactcontent');
		unloadaboutContent('.result2', 'about.html', '#aboutpage');
    });
    
    $('.log2').ajaxStart(function() {
        $(this).text('');
    });
    $('#aboutscrollbutton').click(function() {
        loadContent('.result2', 'about.html', '#aboutpage');
		unloadcontactContent('.result', 'contact.html', '#contactcontent');
    });
});

function loadContent(result, source, content) {
    $(result).load(source);
    $(content).stop().delay(100).fadeIn(1900).css("marginTop","500px").animate(
        {overflow: 'hidden', opacity: 1.0, marginTop: '-500px', queue: false},
        {duration: 1000, specialEasing: {top: 'easeInOutQuad'}});
    $('#folio').animate(
        {top: '-900px', opacity: 0.2, overflow: 'hidden'},
        {duration: 1000, specialEasing: {top: 'easeInOutQuad'}});
}
function unloadaboutContent(content) {
    $(content).delay('normal').animate
		(
        {overflow: 'hidden', opacity: 1.0},
        {duration: 1000, specialEasing: {top: 'easeInOutQuad'}}
		);
		$(content).slideUp('normal',loadContent);
}

function unloadcontactContent(content) {
    $(content).delay('normal').animate
		(
        {overflow: 'hidden', opacity: 1.0},
        {duration: 1000, specialEasing: {top: 'easeInOutQuad'}}
		);
		$(content)
		.animate({top: '-200'})
		.slideUp(500,loadContent);
}
function aboutcompletepagetransition(){
	{queue: false}
	$('.result2', 'about.html', '#aboutpage').remove();
			if(loadContent && unloadaboutContent) {
    
		}else{
    // "stop"
    	return;
	}
	
}

If anyone would know a quicker way for doing this that would be great.

Thanks

Mark