JQuery 기본 문법과 구성요소(효과와 애니메이션 이벤트)

효과와 애니메이션 이벤트

 

 

인터페이스를 개선하기 위해 사용자 정의 애니메이션과 효과를 다양한 요소에 디자인과 색상을 사용하여 추가할 수 있다.

 

animate()

객체가 뷰에 표시되거나 사라질 때 내장 애니메이션 효과를 이용하여 움직임을 더한다.

 

사용문법

$(selector).animate({styles}, duration, easing, callback)

 

파라미터 설명

duration: 선택옵션이며 효과진행 속도를 지정

fast, slow, 밀리초를 사용

easing: 선택옵션이며 진행시간을 지정

easing()함수를 명시. 기본 값은 string

callback:선택옵션이며 애니메이션이 종료된 후 호출될 콜백함수

 

반환

모든 변경 내용을 포함하는 객체를 반환

 

예제 코드)

 

실행결과

 

 

stop()

선택된 요소의 애니메이션을 정지

 

사용 문법

$(selector).stop(stopAll, goToEnd)

 

파라미터

두 개의 boolean값을 전달 받는다.(기본 false)

반환

반환 값은 없다.

 

stopAll 값이 true이면 요소의 다른 애니메이션까지 정지

goToEnd 값이 true이면 현재 애니메이션을 바로 종료

 

예제 코드)

 

실행하여 결과 확인

 

 

숨김, 나타냄, 토글

 

hide()

요소를 숨기는 기능의 함수

사용자 행위에 기반한 동적인 컨텐츠를 만들 때 사용

선택된 요소의 CSS프로퍼티를 display: none;과 같은 효과를 적용

display원본을 나중에 사용하기 위해 저장

반환 값은 없음

 

사용 문법

$(selector).hide(duration, callback)

 

파라미터

duration: 밀리초 단위의 속도

fast, slow, 밀리초

callback: 동작 후 실행될 콜백함수

 

예제 코드)

 

실행결과

 

show()

숨겨진 요소(hide)를 다시 나타낸다.

사용자 행위에 기반한 동적인 컨텐츠를 만들 때 사용

선택된 요소의 CSS프로퍼티를 display: none;을 제거 하는 효과를 적용

반환 값은 없음

 

사용 문법

$(selector).show(duration, callback)

 

파라미터

duration: 밀리초 단위의 속도

fast, slow, 밀리초

callback: 동작 후 실행될 콜백함수

 

예제 코드)

 

실행결과

 

toggle()

요소의 가시성을 전환( 숨김 <-> 보여짐 )

마우스 이벤트 toggle()과 혼동하지 말 것.

 

사용 문법

$(selector).toggle(duration, callback)

 

파라미터

duration: 밀리초 단위의 속도

fast, slow, 밀리초

callback: 동작 후 실행될 콜백함수

 

예제 코드)

 

실행결과 보여지고 사라지고 동작된다.

 

 

다음 함수는 위 예제에서 JQuery함수명만 변경하여 테스트 한다.   

 

나타내기/사라지기

fadeIn() : 나타내기 효과 적용

fadeOut() : 사라지기 효과 적용

fadeToggle() : 토글기능 + fadeIn, fadeOut 효과 적용

 

fadeTo() : 대상 요소의 투명도 조절(0과 1사이의 값)

사용문법:

$(selector).fadeTo( duration, opacity [, complete ])

$(selector).fadeTo( duration, opacity [, easing ] [, complete ])

 

fadeTo()사용 예제

 

 

슬라이드 효과(fadeIn, fadeOut 등과 동일하게 사용)

slideDown(): 아래로 슬라이드

slideUp(): 위로 슬라이드

sildeToggle(): 슬라이드를 위 아래로 토글