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

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

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

( animate 함수 )


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

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


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

이후 callback 메서드에 document.location.href = url; 을 넣어 이동시켜주면 됩니다.


예제소스)

  1. $(function () {
  2. $("body div").fadeIn(500, function () {
  3. $(this).animate({
  4. "top": "150px"
  5. },1000);
  6. });
  7. $("a").click(function () {
  8. var url = $(this).attr("href");
  9. $("body div").animate({
  10. "opacity": "0",
  11. "top": "10px"
  12. },500, function () {
  13. document.location.href = url;
  14. });
  15. return false;
  16. });
  17. });


* 파트너스 활동을 통해 일정액의 수수료를 제공받을 수 있음
작성자 소개
최찬희 프로필
WrapUp 블로거

최찬희

반려견을 좋아하고, 차를 좋아하고, 여행을 좋아하고, 맛집을 찾아 즐기는 웹 개발자 입니다^^

댓글작성

관련 블로그 구경하기

작성자의 다른 포스팅