jQuery fadeIn fadeOut on div during page transition

Greetings WordPress peoples, I am having troubles getting this code to work with the WordPress menu. What I have is.. when clicking on a link to go to another page the #main-content div will fade out then the new page loads. This works fine on anchor tags when I give them the class of ‘link’. But when I assign the class ‘link’ to the wordpress menu it puts the ‘link’ class on the list item that wraps the anchor tags and not in the anchor tag itself.

How do i get this code to work with the wp menu? do i have to make a walker menu?

$(document).ready(function() {
$('#main-content').css('display', 'none');
$('#main-content').fadeIn(1000);

$('.link').click(function() {
event.preventDefault();
newLocation = this.href;
$('#main-content').fadeOut(500, newpage);
});
function newpage() {
window.location = newLocation;
}
});

any help would be greatly appreciated ??