제이쿼리(jQuery) 기초 문법 - 애니메이션 메소드 및 효과

제이쿼리(jQuery) 기초 문법

애니메이션 메소드 및 효과

문서 객체를 보이게 했다가 안보이게 하려면 스타일(CSS)의 display 속성을 이용해야 한다. 단, 스타일을 이용하는 방법은 객체를 단순하게 조절하는 정도의 효과만 기대할 수 있다. 하지만 효과(Effect)메소드를 이용하면 스타일(CSS)를 이용하는 것보다 좀 더 역동적으로 동작을 조절하여 객체를 화려하게 숨기거나 보이게 할 수 있다.

 

효과 메소드

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

 

효과 메소드 종류

 

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

 

효과 메소드의 기본형

효과 메소드의 기본형은 아래와 같으며, 효과 소요시간, 가속도, 콜백함수를 인자값으로 전달 할 수 있다.

 

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

 

효과 소요 시간은 요소를 숨기거나 노출할 때 소요되는 시간이다. slow, normal, fast로 지정해도 되고 1,000(1초)로 직접 지정해도 된다. 가속도는 숨기거나 노출하는 동안의 가속도를 설정한다. swing은 기본값으로 시작과 끝은 느리게, 중간은 빠른 속도로 움직이며, linear는 일정한 속도로 움직인다. 콜백함수는 노출과 숨김 효과가 끝난 후에 실행할 함수인데 생략 가능하다.

 

fadeTo()메소드

 

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

 

투명도는 0~1까지의 값을 입력할 수 있으며, 1에 가까울수록 선명하게 보인다.

 

애니메이션 메소드

애니메이션 메소드를 적용하면 스타일을 적용한 요소를 움직이게 할 수 있다.

 

animate() 메소드

animate()메소드를 이용하면 선택한 요소에 다양한 동작(Motion)효과를 적용할 수 있다. 예를 들어 요소를 앞으로 이동시키거나 점차 커지게 하는 등 다양한 동작을 적용할 수 있다.

 

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

 

스타일 속성은 애니메이션으로 적용할 스타일 속성이다. 적용 시간은 동작에 반응하는데 소요되는 시간으로 적용 시간의 옵션은 효과함수에 적용한 것과 같다.