제이쿼리 -효과 및 애니메이션 메서드

효과 및 애니메이션 메서드

문서 객체를 보이게 했다가 안 보이게 하려면 스타일의 display속성을 이용해야 한다. 단,스타일을 이용하는 방법은 객체를 단순하게 조절하는 정도의 효과만 기대할 수 있다.

하지만 효과 메서드를 이용하면 스타일을 이용하는 것보다 좀 더 역동적으로 동작을 조절해 화려하게 숨기거나 보이게 만들 수 있다.

 

-효과 메서드

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

종류

 

기본형

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

 

효과 소요시간은 요소를 숨기거나 노출할 때 소요되는 시간

case1) ex) “slow” , “normal” , “fast”

case2) ex) 1,000 (1초) 500 (0.5초)

 

가속도는 숨기거나 노출하는 동안의 가속도를 설정합니다

case1) ex) “swing” ->시작과 끝은 느리게 중간은 빠르게(기본값)

case2) ex) “linear” ->일정한 속도로 움직인다.

 

콜백함수는 노출과 숨김 효과가 끝난 후에 실행할 함수이다.(생략가능)

ex) id값이 box인 요소를 2초간 위로 올려 숨기는 예 가속도는 linear이다.또한 요소가 숨겨지면 콜백함수로 hello출력

->$(“#box”).slideUp(2000,“linear”,function(){

alert (“hello”);

});

fadeTo() 메서드

기본형 : $(“요소 선택”).fadeTo(효과 소요 시간,투명도,콜백 함수);

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

-애니메이션 메서드

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

 

animate() 메서드

선택한 요소에 다양한 동작(motion)효과를 적용할 수 있다. 앞으로 이동하거나 커지게하는등 다양한 동작을 할 수 있다.

 

기본형

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

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