[jQuery] 애니메이션 & 효과 메서드

 

 

효과 메서드

효과 메서드는 선택한 요소를 역동적으로 숨겼다가 보이게 만드는 기능이 있다.

 

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

 

메서드 기본형

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

효과 소요 시간 :  "slow", "normal", "fast" ,  1000(1초), 500(0.5초)

가속도 : "swing" 시작은 느리게, 중간은 빠른 속도(기본값),   "linear" 일정한 속도

 

$("#box").slideUp(2000, "linear", function(){

           alert("hello");

});

---

 

animate()

선택한 요소에 다양한 Motion 효과를 적용할 수 있다.

 

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

 

---

 

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

 

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