페이지 이동 시 효과 내기

우선 애니메이션 효과를 낼 큰 div 컨테이너를 만든다.

페이지 돌입시에는 jQuery 맨 윗부분에 컨테이너에 효과를 부여한다.

페이지 이동시에는 페이지의 모든 앵커(a)를 대상으로 클릭시 효과를 부여한다.

이 때, 앵커를 클릭하였을 경우 디폴트 값으로 이동되는 것을 막기 위해 return false;를 삽입하고

클릭시 앵커의 속성값에 있는 url 주소를 변수로 저장한다.

var url = $(this).attr("href");

그리고 콜백 메서드에

document.location.href = url;

을 통해 이동을 시켜주면 된다.

간단한 예제>>

$(function () {
    $("body div").fadeIn(500, function () {
        $(this).animate({
            "top": "150px"
        },1000);
    });
    
    $("a").click(function () {
        var url = $(this).attr("href");
        $("body div").animate({
            "opacity": "0",
            "top": "10px"
        },500, function () {
            document.location.href = url;
        });
        
        return false;
    });
});