예제와 함께하는 제이쿼리 강의 이번에 다룰 기능은 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() 메소드는 사용자의 역량에 따라서 정말 다양한 기능을 구현할 수 있는 메소드입니다. 꼭 익히셔서, 재밌는 기능을 구현하는 개발자가 되셨으면 좋겠습니다 !
'개발 > jQuery' 카테고리의 다른 글
이 포스팅은 쿠팡파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.