jQuery 다양한 효과와 애니메이션

요소를 숨기거나 노출시킬 때 css 스타일 적용 말고도 다양한 Effect를 지원하는 제이쿼리의 메서드를 알아보겠습니다.

 

 

 

 

 

1 효과 및 애니메이션 메서드

---

문서 객체를 보이고 안보이고를 하려면 CSS의 display 속성을 조정하는데 제이쿼리의 Effect와 함께하면 좀 더 동적으로 동작에 효과를 줄 수 있고, 애니메이션 메서드도 추가하면 Motion까지 적용할 수 있습니다. 다음은 제이쿼리 효과 메서드의 종류입니다.

 

구분	종류	설명
숨김	hide()	요소를 숨김
	fadeOut()	요소가 점점 투명해지면서 사라짐
	slideUp()	요소가 위로 접히며 숨겨짐
노출	show()	숨겨진 요소가 노출
	fadeIn()	숨겨진 요소가 점점 선명해짐
	slideDown()	숨겨진 요소가 아래로 펼쳐짐
노출, 숨김	toggle()	hide(), show() 효과를 적용
	fadeToggle()	fadeIn(), fadeOut() 효과를 적용
	slideToggle()	slideUp(), slideDown() 효과를 적용
	fadeTo()	지정한 투명도를 적용

 

 

효과 메서드의 기본형은 다음과 같습니다. 인자값으로 효과 소요 시간, 가속도, 콜백 함수를 사용할 수 있습니다. 효과 소요 시간은 요소를 숨기거나 노출할 때 소요되는 시간으로 "slow", "normal", "fast"나 1,000, 500 등으로 적용할 수 있습니다. 가속도는 "swing" (시작과 끝은 느리게, 중간은 빠르게. 기본값) "linear"(일정한 속도로 움직임) 값이 있습니다. 콜백 함수는 노출과 숨김 효과가 끝난 후 실행할 함수로 생략 가능합니다. fadeTo() 의 투명도는 0부터 1까지의 값을 입력할 수 있고 1에 가까울 수록 선명하고 0에 가까울수록 투명해집니다.

 

$("요소 선택").효과 메서드(효과 소요 시간, 가속도, 콜백 함수);

// exmaple
$("#box").slideUp(2000, "linear", function(){
	alert("hello");
});

$("요소 선택").fadeTo(효과 소요 시간, 투명도, 콜백 함수);

 

animate() 메서드를 작용하면 스타일을 적용한 요소를 움직일 수 있습니다. 기본형은 다음과 같습니다. 적용 시간의 옵션은 아까의 효과 함수에 적용한 것과 같습니다.

 

$("요소 선택").animate({스타일 속성}, 적용 시간, 가속도, 콜백 함수)

 

 

 

 

2 애니메이션 효과 제어 메서드

---

제이쿼리의 애니메이션 효과 제어 메서드란 '효과' 나 '애니메이션'이 적용된 요소의 동작을 제어하는 메서드입니다. 사용 방법에 앞서 먼저 원리부터 알아보겠습니다.

애니메이션 메서드는 함수가 적용된 순서되로 queue라는 memory에 저장됩니다. 큐의 저장 방식은 FIFO로 선입선출 방식입니다. (First In First Out) 먼저 들어간 데이터가 (저장소에 저장된 순서대로) 먼저 처리되는 것입니다. 즉 큐에 저장된 애니메이션 대기열 사이에서는 먼저 들어간 애니메이션이 먼저 실행됩니다. 

다음은 애니메이션을 적용한 요소의 동작을 제어하는 메서드를 정리했습니다.

 

종류	설명
stop()	현재 실행 중인 효과를 모두 정지
delay()	지정한 시간만큼 지연 후 애니메이션 진행
queue()	큐에 사용자 정의 함수를 추가하거나 큐에 대기 중인 함수를 배열에 담아 반환 queue() 메서드 이후의 애니메이션 효과 메서드는 모두 취소
clearQueue()	큐에서 처음으로 진행하고 있는 애니메이션만 제외하고 대기 중인 애니메이션 모두 제거
dequeue()	queue() 메서드를 이용하면 대기하고 있는 애니메이션 메서드는 제거되는데  dequeue() 메서드는 메서드가 제거되는 것을 막을 수 있음
finish()	선택한 요소의 진행 중인 애니메이션을 강제로 완료 시점으로 보낸 후 종료

 

stop() 메서드는 요소에 적용한 애니메이션을 정지시키고, delay() 메서드는 요소에 적용한 애니메이션을 지정한 시간만큼 지연시킵니다.  첫 줄은 진행중인 (inprogress) 첫 번째 애니메이션만 정지시키고 큐에 대기중인 애니메이션은 계속 실행합니다. 두 번째 줄의 clearQueue, finish는 true나 false의 값을 입력할 수 있습니다. (기본값 flase) claerQueue가 true면 큐에서 대기중인 애니메이션을 모두 제거하며 finish가 true면 진행 중인 애니메이션을 강제로 종료합니다.

 

$("요소 선택").stop();
$("요소 선택").stop(clearQueue, finish);

// 진행 중인 애니메이션만 정지
$(".txt1").animate({opacity:0.5}, 1000).animate({marginLeft:"500px"}, 1000);
$(".txt1").stop();

// 대기 중인 애니메이션은 제거하고 진행중인 애니메이션은 강제로 종료
$(".txt2").animate({opacity:0.5}, 1000).animate({marginLeft:"500px"}, 1000);
$(".txt2").stop(true, true);

 

stop() 메서드는 첫 번째, 두 번째 인자값에 따라 메서드 적용 방식이 달라집니다. 모든 인자값을 생략하면 진행 중인 애니메이션만 정지되며 모든 인자값에 true를 대입하면 대기 중인 애니메이션은 제거되고 진행 중인 애니메이션은 강제 종료됩니다. 다음은 애니메이션 실행 지연을 시켜주는 delay() 메서드입니다.

 

$("요소 선택").delay(지연 시간).애니메이션 효과 메서드();

// example : 3초 후 애니메이션 적용
$(".txt1").delay(3000).animate({marginLeft: "500px"}, 1000);

 

 

queue() 메서드는 큐에 적용된 애니메이션 함수를 반환하거나 큐에 지정된 함수를 추가합니다. 실행하면 실행 이후의 모든 애니메이션이 취소됩니다. dequeue() 메서드는 queue() 메서드 실행 이후에 적용된 애니메이션 메서드가 취소되지 않게 연결해줍니다. clearQueue() 메서드는 진행 중인 (=첫 번째) 애니메이션을 제외하고 큐에서 대기하는 모든 애니메이션 함수를 제거합니다. 다음은 각각 메서드의 기본형입니다.

 

// queue의 함수 반환
$("요소 선택").queue();

// queue에 함수 추가
$("요소 선택").queue(function() { 자바스크립트 코드 });

// dequeue() 메서드
$("요소 선택").dequeue();

// clearQueue() 메서드
$("요소 선택").clearQueue();

 

 

 

슬라이드 요소 만들기

animate()  메서드를 사용하여 슬라이드 요소를 만들어보겠습니다. 버튼에 따라서 요소가 이동하는 예제입니다.

 

 

 

 

---

 

아래는 같은 도서(DO IT!)를 보며 정리한 내용들입니다. 최신순으로 정리되어 있습니다.

 

 

jQuery 객체 조작 메서드 (속성조작메서드, 수치조작메서드, 객체편집메서드)

jQuery 이벤트 등록 메서드 (단독, 그룹, 강제, 제거, 로딩, 마우스, 키보드)

jQuery 제이쿼리 탐색 선택자

jQuery 제이쿼리 문서 객체 선택자