본문 바로가기

개발 공부/jQuery

[jQuery] effect

1.요소의 표시와 숨김

- show(); hide(); toggle(); 인자로 밀리초, slow, fast 활용하여 속도 조절 가능

- 페이드 : 인자로 밀리초, slow, fast 활용하여 속도 조절 가능

.fadeIn() 선택한 요소의 CSS opacity 속성값을 높여가며 요소를 나타지게 함.
.fadeOut() 선택한 요소의 CSS opacity 속성값을 높여가며 요소를 사라지게 함.
.fadeTo() 페이드 효과에서 사용하는 opacity 속성값을 직접 설정함.
.fadeToggle() 선택한 요소에 fadeIn() 메소드와 fadeOut() 메소드를 번갈아가며 적용함.

2. 슬라이드 효과 : 인자로 밀리초, slow, fast 활용하여 속도 조절 가능

.slideUp() 선택한 요소의 CSS height 속성값을 높여가며 요소를 사라지게 함.
.slideDown() 선택한 요소의 CSS height 속성값을 낮춰가며 요소를 나타나게 함.
.slideToggle() 선택한 요소에 slideUp() 메소드와 slideDown() 메소드를 번갈아가며 적용함.

3. 이펙트 효과 제어

.delay() 실행 중인 큐 안에서 연속적으로 실행되는 이펙트 효과 사이의 지연 시간을 설정함.
.stop() 선택한 요소에서 실행 중인 모든 이펙트 효과를 즉시 중지시킴.
.finish() 선택한 요소에서 실행 중인 모든 이펙트 효과를 즉시 중지시키고, 선택한 요소가 포함된 큐까지 제거하여 모든 이펙트 효과를 전부 종료시킴.

4. 사용자 정의 이펙트 .animate()

$(선택자).animate(프로퍼티[,지속시간][,시간당속도함수][,콜백함수]);

- 프로퍼티 : css 속성(카멜케이스로)

더보기

- backgroundPositionX

- backgroundPositionY

- borderWidth

- borderBottomWidth

- borderLeftWidth

- borderRightWidth

- borderTopWidth

- borderSpacing

- margin

- marginBottom

- marginLeft

- marginRight

- marginTop

- outlineWidth

- padding

- paddingBottom

- paddingLeft

- paddingRight

- paddingTop

- height

- width

- maxHeight

- maxWidth

- minHeight

- minWidth

- fontSize

- bottom

- left

- right

- top

- letterSpacing

- wordSpacing

- lineHeight

- textIndent

- 지속시간 : 밀리초

- css 속성값으로 미리 정의된 show, hide, toggle 사용가능

- 시간당 속도 함수 : swing, linear, ease 등

 

'개발 공부 > jQuery' 카테고리의 다른 글

[jQuery] Ajax  (1) 2023.09.15
[jQuery] 이벤트  (1) 2023.09.15
[jQuery] 스타일 , 클래스 설정  (1) 2023.09.15
[jQuery] 요소의 크기, 위치  (1) 2023.09.15
[jQuery] 탐색, 필터링  (0) 2023.09.15