[jquery] 효과 메서드

효과 메서드

효과 메서드를 이용하면 쉽고 역동적으로 동작을 조절하여 객체를 화려하게 숨기거나 보일 수 있다.
또한 애니메이션 메서드까지 사용하면 다양한 동작(Motion)까지 적용할 수 있다.

효과 메서드
숨김 효과
hide()	display none과 같이 요소를 숨긴다.
fadeOut()	요소가 점점 투명해지면서 숨겨진다.
slideUp()	요소가 위로 접히며 숨겨진다.
노출 효과
show()	display block 처럼 요소가 나타난다.
fadeIn()	숨겨진 요소가 점점 선명해지면서 나타난다.
slideDown()	숨겨진 요소가 아래로 펼쳐지며 나타난다.
숨김, 노출 효과
toggle()	show()와 hide()효과를 적용한다.
fadetoggle()	fadeOut(), fadeIn() 효과를 적용한다.
slidetoggle()	slideUp(), slideDown() 효과를 적용한다.
fadeto()	지정한 투명도를 적용한다.

// 기본형
        $('요소').효과메서드(효과 소요시간, 가속도, 콜백함수)

// 기본형 : fadeTo만 가속도 대신 투명도 사용
        $('요소').fadeTo(효과 소요시간, 투명도(0 ~ 1사이의 값), 콜백함수)

- 효과 소요시간
요소를 숨기거나 노출할 때 소요되는 시간을 말한다. 단위는 ms 단위를 사용한다.
또는 'slow', 'normal', 'fast'와 같이 작성할 경우 지정된 소요시간이 적용된다.       

- 가속도
숨기거나 노출하는 동안의 가속도를 결정한다.
'swing'과 'linear'를 적용할 수 있다.
swing은 시작과 끝은 느리고 중간부분은 빠른 속도로 움직이는 것을 말하고, linear는 일정한 속도를 말한다.
생략할 경우 기본값인 swing으로 지정된다.

- 콜백함수
노출과 숨김 효과가 끝나면 실행할 함수이다. 콜백함수는 생략이 가능하다.
콜백함수는 익명함수이다.

---

 

See the Pen Untitled by 26%익산의 (@moroiolt-the-typescripter) on CodePen.