page transition

var $context = $('body'),
$navItem = $('#main-nav-menu li'),
$navItemMenu = $('#main-nav-menu li a'),
$navUnderline = $('#nav-underline'),
$activeItem = $('#main-nav-menu li.active'),
animating = false;

$navUnderline.css({
    left: $activeItem.position().left, 
    width: $activeItem.outerWidth(), 
});
$navItem.mouseenter(function(){
    $navUnderline.stop().css({
        left: $(this).position().left, 
        width:$(this).outerWidth(), 
    });
})
.mouseout(function(){
    $navUnderline.stop().css({
        left: $activeItem.position().left, 
        width: $activeItem.outerWidth(), 
    });
})

// 링크 가져오기 
$navItemMenu.click(function(e){
    e.preventDefault();
    var newURL = $(this).attr('href');
    pageChange(newURL);

    
    
});
function pageChange(newURL){

    $activeItem = $('#main-nav-menu a[href="'+newURL+'"]').parent();
    $navUnderline.css({
        left: $activeItem.position().left, 
        width: $activeItem.outerWidth(), 
    });

    $('body').addClass('animation');

    var container = $('<div id="loadingContainer"></div>');
    container.load(newURL, function(){
        $('#hero-image').html('<h1>asdfasdfasdf</h1>');
        $('#main-content').html(container.find('#main-content').contents());

        //id 속셩이 page로 시작하는 거
        var pageID = container.find('[id^="page"]').attr('id');
        $('[id^="page"]').attr('id', pageID);

        setTimeout(function(){
            $('body').removeClass('animation');
        }, 500);

    });
};