[JQUERY] 페이지 이동 시 애니메이션 효과 내기

애니메이션 효과를 적용할 div container를 생성합니다.

페이지 접근 시 jquery의 맨 윗부분에 container 효과를 부여하면 됩니다.

( animate 함수 )

페이지 이동 시에는 모든 a 태그를 대상으로 클릭 이벤트를 부여합니다.

이 때 a 태그를 클릭했을 경우 디폴트 값으로 이동되는 것을 방지하기 위해 return false;를 입력해 클릭 시 앵커 속성값에 있는 url 주소를 변수로 저장합니다.

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

이후 callback 메서드에 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;
    });
});