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 |