2023/04/17__jQuery_03

**** 제이쿼리 효과

** 기본효과

1.hide()

- 지정된 요소를 감추기

- 매개변수 없음

- $("대상").hide()

 

2. show()

- 지정된 요소를 보이기

- 매개변수 없음

- $("대상").show()

 

3. toggle()

- 지정된 요소의 속성을 교차

- $("대상").toggle()

 

** 페이드 효과

1. fadeIn

- 대상을 서서히 나타나게

- $("대상").fadeIn([duration],[complete])

 

2. duration

- 애니메이션이 진행되는 시간

- String 타입, Number 타입

- "slow", "fast", 1/1000s

 

3. complete

- function() 타입

- 해당 대상이 효과를 완료했을 때 실행할 내용

 

4. fadeOut

- 대상을 서서히 사라지게

- fadeIn과 사용방법 동일

 

5. fadeTo

- 지정된 opacity 값까지 Fade

- $("대상").fadeTo(duration, opacity,[complete])

- duration : fadeIn 과 동일

- opacity : Number 타입 , 0~1 사이의 값만 사용

- complete : fadeIn과 동일

 

6. fadeToggle

- 지정된 대상의 opacity를 변경

- fadeToggle([duration],[easing],[complete])

 

** slide 효과

 

1. slideDown

- 미끄러지는 듯한 효과

- slideDown([duration],[complete])

 

2. duration

- 애니메이션이 진행되는 시간(기본값:400)

- String 타입, Number 타입

- "slow", "fast", 1/1000s

 

3. complete

- function() 타입

- 해당 대상이 효과를 완료했을 때 실행할 내용

 

4. slideUp

- slideUp([duration], [complete])

- slideDown과 사용방법 동일

 

* animate 효과

1. animate

- CSS로 제어 가능한 속성을 변화시키는 메소드

- animate(prperites, [duration],[easing],[complete])

- properties :  css로 제어 가능한 속성과 값, 여러 개 사용 가능

- duration : Number 또는 String 타입 애니메이션 진행시간(기본값:400)

- easing : String 타입 가속효과 (기본값 : swing)

- complete : Function() 타입 효과가 완료되었을 때 실행할 내용