top

애니메이션 메서드


기본 선택자
종류 제이쿼리 예시 자바스크립트 설명
기본 .hide() 👍🏻 $("selector").hide() .hide()는 선택한 요소를 사라지게 합니다.
.show() 👍🏻 $("selector").show() .show()는 선택한 요소를 나타나게 합니다.
.toggle() 👍🏻 $("selector").toggle() .toggle()은 선택한 요소가 보이면 보이지 않게, 보이지 않으면 보이게 합니다.
페이드 .fadeIn() $("selector").fadeIn() .fadeIn()은 선택한 요소를 서서히 나타나게 합니다.
.fadeOut() $("selector").fadeOut() .fadeOut()은 선택한 요소를 서서히 사라지게 합니다.
.fadeTo() $("selector").fadeTo() 선택한 요소의 투명도를 조절합니다.
.fadeToggle() $("selector").fadeToggle() .fadeToggle()은 보이는 요소는 보이지 않게, 보이지 않는 요소는 보이게 합니다.
슬라이드 .slideDown() $("selector").slideDown() .slideDown()은 선택한 요소를 아래쪽으로 서서히 나타나게 합니다.
.slideUp() $("selector").slideUp() .slideUp()는 선택한 요소를 위쪽으로 서서히 사라지게 합니다.
.slideToggle() $("selector").slideToggle() .slideToggle()은 보이지 않는 요소는 아래쪽으로 서서히 나타나게 하고, 보이는 요소는 위쪽으로 서서히 사라지게 합니다.
커스텀 .animate() 👍🏻 $("selector").animate() .animate()는 애니메이션 효과를 만듭니다.
.delay() $("selector").delay() .delay()는 실행 중인 함수를 정해진 시간만큼 중지(연기) 시킵니다.
.finsish() $("selector").finsish() .finish() 메서드 선택한 요소의 진행중인 애니메이션을 강제로 종료합니다.
.stop() $("selector").stop() 해당하는 애니메이션 효과를 바로 멈춥니다.
.queue() $("selector").queue() 큐는 한쪽 끝(rear)에서는 삽입연산만 이루어지며 다른 한쪽 끝(front)에서는 삭제연산만 이루어지는 유한 순서 리스트이다.
.clearQueue() $("selector").clearQueue() 큐는 특정한 엘리먼트에서 발생될 애니메이션의 목록입니다. 제이쿼리를 사용해 엘리먼트에서 애니메이션을 실행시킬 때마다 애니메이션은 큐에 저장됩니다.엘리먼트는 큐의 모든 애니메이션이 완료될 때까지 큐에 저장된 애니메이션을 한번에 하나씩 실행시킵니다.다시 말해, 애니메이션 효과의 명령은 큐(Queue)에 누적됩니다.큐는 먼저 들어간 것이 먼저 나오는 공간을 말합니다.jQuery의 효과 메서드를 사용하면 효과 명령이 차례차례 큐에 들어가게 되고, 들어간 순서대로 실행되게 됩니다.
.dequeue() $("selector").dequeue() queue 메서드를 사용했을때 내부에서 반드시 사용해 주어야하는 메서드입니다.