애니메이션 효과로 움직임

비표시 상태의 태그를 표시하는 show( )

CSS의 display 속성값이 "none" 상태의  HTML 태그에 애니메이션 효과를 주어 서서히 나타나게 하는 명령

$(셀렉터).show( 속도 );

show( )에 콜백 함수 지정하기

show( )는 속도를 기술한 뒤에 ,(콤마)로 구분하고 콜백 함수를 넣을 수 있음

$(셀렉터).show(속도, 콜백함수);

콜백 함수라는 것은 애니메이션 효과 처리가 끝난 후 이어서 실행되는 명령을 의미

"처리가 끝나면 이 함수를 호출할 것"이라는 의미이기 때문에 콜백함수라고 함

 

표시 중인 태그를 숨기는 hide( )

hide( )는 show( )의 반대 동작을 하는 명령

hide( )의 괄호 안에는 애니메이션 효과의 속도와 콜백 함수를 기술할 수 있고 지정한 속도로 사이즈(높이 / 폭)를 서서히 변화시키면서 태그를 안보이게 함

$(셀렉터).hide(속도, 콜백함수);

 

태그의 표시 / 비표시를 반복하여 변경하는 toggle( )

태그의 표시 / 비표시를 반복하여 변경한는 명령

show( ) / hide( )와 마찬가지로 toggle( )의 괄호안에는 애니메이션 효과의 속도와 콜백함수를 기술할 수 있음

$(셀렉터).toggle(속도, 콜백함수);

ㄴtoggle( )에는 클릭될 때마다 다른 처리를 하는 기능도 있음

 

표시 / 비표시를 슬라이딩 효과로 변경하는 slideDown( ) / slideUp( )

slideDown( )은 비표시된 태그 높이 0부터 원래의 높이로 서서히 늘려가며 표시

slideUp( )은 표시 상태의 태그 높이를 서서히 0에 가깝게 줄여가며 표시

$(셀렉터).slideDown(속도, 콜백함수);

$(셀렉터).slideUp(속도, 콜백함수);

 

표시 / 비표시를 슬라이딩 효과로 반복하여 변경하는 slideToggle( )

toggle( )은 슬라이딩 효과 버전이하고 생각하면 됨

셀렉터로 지정한 태그가 표시 상태인 경우에는 비표시 상태로, 비표시 상태인 경우에는

표시 상태로 슬라이딩 애니메이션 효과를 주어 실행

$(셀렉터).slideToggle(속도, 콜백함수);

 

표시 상태를 페이드인 / 페이드아웃으로 변경하는 fadeIn( ) / fadeOut( )

문자 그대로 페이드인 / 페이드아웃 효과를 내면서 HTML 태그의 표시 상태를 변경하는 명령

"페이드인" 어두움에서 점점 밝아지는 상태를 말함

"페이드아웃" 밝은 상태에서 점점 어두워지는 상태를 말함

$(셀렉터).fadeIn(속도, 콜백함수);

$(셀렉터).fadeOut(속도, 콜백함수);

 

투명도를 서서히 변경하는 fadeTo( )

셀렉터로 지정한 태그의 투명도를 설정한 값까지 서서히 변경하는 명령

$(셀렉터).fadeTo(속도, 투명도, 콜백함수);

 

독자적인 애니메이션 효과를 설정할 수 있는 animate( )

임의의 CSS 속성값을 서서히 변경시키는 독자적인 애니메이션효과를 작성할 수 있도록 하는 명령

$(셀렉터).animate( 값을 변경하고 싶은 CSS 속성, 속도, 움직임, 콜백함수 );