[제이쿼리]- 애니메이션 메서드

에니메이션 메서드를 사용하면 선택한 요소에 스타일을 적용한 움직임을 만들어 낼 수 있다. 

애니메이션을 적용하기 위해서는 .animate()메서드를 사용한다. 

[기본형]

$('요소선택').animate({css스타일 속성 : '값'}, 효과 적용 시간, 가속도, 콜백함수)

- ({css스타일 속성 : 값} :  애니메이션으로 적용할 css스타일을 넣는다. 이때 객체로 넣어야 하며 속성 : '값' 으로 구분하여 작성한다

 

- 효과 적용 시간 : 동작에 반응하는데 소요되는 시간을 뜻한다. 적용시간은 'fast', 'slow','normal'이나 ms단위로 숫자를 넣는다. 

 

- 가속도 : 'swing' 또는 'linear' 를 적용할 수 있다. 'swing' = 시작과 끝은 느리게, 중간은 빠른 속도로 움직인다.  'linear' = 일정한 속도로 움직인다. 기본값은 swing이고 가속도 부분을 안적으면 swing이 실행

 

- 콜백함수 : 콜백함수는 생략이 가능하다. 콜백함수는 효과가 끝났을 때 실행할 함수이다. 콜백함수는 익명함수로 쓴다.

---

 예제 ) 버튼을 누르면 500px 과 50px씩 이동

 <div>

      <button class="btn1">버튼1</button>

    </div>

    <span class="txt1">500px이동</span>

    <div>

      <button class="btn2">버튼2</button>

    </div>

    <span class="txt2">"50px"씩 이동</span>

 

1. 버튼누르면 500px이동

 //.btn1을 누르면 실행

        $(".btn1").on("click", function () {

          $(".txt1").animate(

            {

              marginLeft: "500px",

              fontSize: "30px",

            },

            1000,

            "linear",

            function () {

              alert("모션완료");

            }

          );

        });

 

.txt1을 1초동안 500px만큼 이동시킨다. 

콜백함수로 애니메이션이 끝나면 alert 창이 실행

---

2. 버튼을 클릭할 때마다 50px씩 더해져서 이동시키기

//.btn2를 클릭할 때마다 이벤트 실행

        $(".btn2").on("click", function () {

          //.txt2를 0.5초동안 50px씩 이동. 가속도를 지정하지않으면 기본값인 swing이 지정

          //계속해서 복합대입으로 +50씩 더해서 옆으로 이동하게 함

          $(".txt2").animate(

            {

              marginLeft: "+=50px",

            },

            500

          );

        });

마진레프트의 기본값은 0 이라서 계속해서 +50씩 더해져서 클릭할 때마다 50px씩 이동한다.