Ajax page slide+fade transition

script.js

$(document).ready(function(){
	
	var currentOrderID = $('.nav .current a').parent().index()
	
	$('[data-ajax]').on('click', 'a', function(e){
		var target = $(e.target),
			animSpeed = 200,
			url = target.attr('href'),
			newOrderID = target.parent().index()
		
		e.preventDefault()
		
		// cancel the ajax before it starts if we are already on the current page
		if(currentOrderID == newOrderID) return false
		
		$.ajax({
			url: url,
			success: function(msg){
				
				// animate the transition between pages.
				
				$('.main')
					.animate({
						// move the content far to the left or right, so that it is offscreen
						'left': (currentOrderID > newOrderID ? '' : '-') + ($(window).width()-960)+'px',
						'opacity': 0
					}, animSpeed, function(){
						
						// then, once that is done...
						$(this)
							// switch the content
							.html(msg)
							// instantly move it far to the opposite side of the screen, so that it's still offscreen
							.css('left', parseInt($(this).css('left').replace('px',''))*-1 + 'px')
							.animate({
								// then slide it back to the original location of the div.
								'left': 0,
								'opacity': 1
							}, animSpeed)
					})
					
				// update the browsers address bar so that it looks like we actually went to a new page
				window.history.pushState(null,null,url);
				
				currentOrderID = newOrderID
					
				
				$('[data-ajax] li').removeClass('current')
				target.closest('li').addClass('current')
			}
		})
	})
	
})