[jQuery] 예제와 함께하는 제이쿼리 강의 (jQuery - animate())

예제와 함께하는 제이쿼리 강의 이번에 다룰 기능은 animate() 메소드입니다.

jQuery addClass()

---

.addClass() 메소드는 특정한 클래스를 요소에 추가할 수 있습니다.

문법

---

.addClass( className )

className ( 지정한 클래스 이름을 추가)

데이터타입 : 문자열(String)

1개 또는 2개 이상의 클래스들을 속성에 추가합니다.

.addClass( function )

function 

Type: Function( Integer index, String currentClassName ) => String

함수에서 반환된 클래스를 속성에 추가합니다.

여기서 함수는 인자(매개변수) 값으로 index 와 currentClassName을 가지고 있습니다. 이 부분은 예제를 가지고 밑에서 설명드리겠습니다. 이 함수 내에서 this는 현재 요소를 나타냅니다.

알고 있어야할 사실은 이 메소드가 클래스를 대체하는 함수가 아니라는 것입니다. 단순히 클래스를 추가하는 기능만 가지고 있습니다. 

CSS3에서 지정하던 클래스를 jQuery로 대체해서 사용하지 말라는 뜻입니다.

예시

animate 메소드를 사용할 때 {params}의 값으로 저는 margin-left 속성에 200px을 적용시켰습니다. 그리고 속도는 500ms로 조정했습니다.

jQuery animate() - Manipulate Multiple Properties

animate() 메소드는 여러가지 애니메이션 속성을 지정할 수 있습니다. 아래 예시를 통해서 설명을 드리도록 하겠습니다.

저는 animate() 메소드의 사용자 지정 값으로 margin-left, opacity, height 그리고 width를 지정했습니다. 결과값을 보면 이 속성 값에 맞게 적용됨을 알 수 있습니다.

jQuery animate() - Using Relative Values

animate() 메소드는 값을 중첩해서 적용할 수도 있습니다.

위 예제를 보면 클릭할 때마다 height 와 width 값이 기존 값에 "+=50px"이 추가됨을 알 수 있습니다. 

jQuery animate() - Using Pre-defined Values

또한 신기한 점은 미리 정의된 값들을 사용할 수 있다는 점입니다. "show", "hide" 그리고 "toggle"과 같은 값들을 값으로써 사용할 수 있습니다.

위 예제처럼 toggle이라는 값을 사용해서 적용시킬 수 있습니다.

jQuery animate() - Uses Queue Functionality

animate() 메소드를 활용해서, 뭔가 동적이고 연속적인 기능을 만들 수도 있습니다.

이렇게 animate() 메소드를 활용해서 인터렉티브한 효과를 구현할 수 있습니다. 이 기능이 이해가 안되시면, 위 예시를 보시고 한번 이해해보시기 바랍니다.

이렇게 재밌는 기능을 구현할 수도 있습니다 ㅎㅎ

animate() 메소드는 사용자의 역량에 따라서 정말 다양한 기능을 구현할 수 있는 메소드입니다. 꼭 익히셔서, 재밌는 기능을 구현하는 개발자가 되셨으면 좋겠습니다 !