본문 바로가기
내마음대로만들어보자/JS

효과 및 애니메이션 메서드

by 소농민! 2021. 8. 25.
728x90

1. 효과 메서드

효과(Effect) 메서드에는 선택한 요소를 역동적으로 숨겼다가 보이게 만드는 기능을 가진 메서드다.

 

* 효과 메서드 종류

구분 종류 설명
숨김 hide() 요소를 숨긴다.
fadeOut() 요소가 점점 투명해지면서 사라진다.
slideUp() 요소가 위로 접히며 숨겨진다.
노출 show() 숨겨진 요소가 노출된다.
fadeIn() 숨겨진 요소가 점점 선명해진다.
slideDown() 숨겨진 요소가 아래로 펼쳐진다.
노출, 숨김 toggle() hide(), show() 효과를 적용한다.
fadeToggle() fadeIn(), fadeOut() 효과를 적용한다.
fadeTo() 지정한 투명도를 적용한다.

 

* 기본형

$("요소 선택").효과 메서드(효과 소요 시간, 가속도, 콜백함수);

- 효과 소요 시간

  → 요소를 숨기거나 노출할떄 소요되는 시간

      방법1 : "slow", "normal", "fast"  or 방법2 : 1,000)1초), 500(0.5초)

 

- 가속도 

  → 숨기거나 노출하는 동안의 가속도를 설정한다.

      방법1 : "swing" (시작과 끝은 느리게. 중간은 빠른속도로 움직인다(기본값))

      방법2 : "linear" (일정한 속도로 움직인다.)

 

- 콜백 함수 

  → 노출과 숨김효과가 끝난 후에 실행하는 함수 (생략가능)  

'내마음대로만들어보자 > JS' 카테고리의 다른 글

animate() 메서드  (0) 2021.08.25
fadeTo() 메서드  (0) 2021.08.25
change() 이벤트 메서드  (0) 2021.08.23
focus() / blur() / focusin() / focusout() 메서드  (0) 2021.08.23
scroll() 이벤트 메서드  (0) 2021.08.23