[jQuery] 예제와 함께하는 제이쿼리 강의 (jQuery - slideDown() / slideUp() / slideToggle())

이번에 다뤄볼 기능은 jquery - slide() 메소드입니다.

jQuery Effects - Sliding

slide 메소드는 요소를 위 그리고 아래로 움직이게 도와주는 기능을 가지고 있습니다.

slide 메소드는 아래와 같이 3가지 기능을 가지고 있습니다.

• slideDown()
• slideUp()
• slideToggle()

jQuery slideDown() Method

slideDown() 메소드는 요소를 아래로 내려주는 역할을 합니다.

문법

$(selector).slideDown(speed,callback);

인자는 지금까지 소개했던 메소드와 같이 속도를 제어할 수 있는 인자와 추가적인 기능을 적용시킬 수 있는 callback 함수 인자를 가지고 있습니다.

아래는 slideDown() 메소드의 예시입니다.

jQuery slideUp() Method

slideUp() 메소드는 slideDown() 메소드와 반대로 요소를 올리는 기능을 가진 메소드입니다.

아래는 slideUp() 메소드의 예시입니다.

jQuery slideToggle() Method

slideToggle() 메소드는 slideDown() 과 slideUp 메소드를 합쳐놓은 메소드라고 생각하시면 됩니다.

만약 slide가 내려가있다면, slide를 올려주고, slide가 올라가있으면, slide를 내려주는 역할이죠.

예시

보통 slideToggle() 메소드를 사용해서 웹사이트 네비게이션(navigation)을 제작할 때 많이 사용합니다. 간편하게 네비게이션 하단부분의 panel을 쉽게 제작할 수 있죠.