Page Transition Click Handler Example

TransitionPageClickHandler.js

// Get our transition links in the nav
opts.$navLinks = $('nav a[transition-link]');

// Attach click handlers for all links with our special transition attribute.
opts.$navLinks.click(function(e) {
	// Prevent navigation...
	e.preventDefault();
	
	opts.toggleLoading(true);
	
	// Toggle the selected menu item.
	$('nav .selected').toggleClass('selected', 200);
	var that = this;
	setTimeout(function() {
		$(that).parent().addClass('selected', 200);
	}, 210);
	
	var pageUrl = $(this).attr('href'),
	    transition = $(this).attr('transition-name');
	
	loadPage(pageUrl)
		.done(function($newPageContents, url) {
			var $oldContentHolder = opts.getContentHolder().wrapInner('<div class="pageWrap"></div>'),			
				$oldContent = $oldContentHolder.children().first(),
				$newContent = $('<div class="newPageWrap"></div>').append($newPageContents),
				transitionName = transition || opts.defaultTransition;
				
			opts.transitionHandler(transitionName, 
				$newContent, 
				$oldContent, 
				function() { 
					opts.toggleLoading(false);
					$newContent.contents().unwrap(); 
				});
		})
		.fail(function(url) {
			opts.toggleLoading(false);
			alert('Error getting page');
		});
});