[jQuery] slideUp(), slideDown()를 이용한 객체 펼치기/접기

이전 포스팅에서 jquery의 hide(), show()를 이용하여 특정 내용을 감추거나 보일수 있게끔 하는 방법에 대해 포스팅 한 적이 있다.

오늘은 이와 비슷한 맥락으로 slideUp(), slideDown()에 대해 소개하려 한다.

slideUp(), slideDown()은 객체를 animate하여 펼쳐지는 효과와 접히는 효과를 볼 수 있다. 흔히 말해 접힘/펼침과 같은 효과를 슬라이딩 이라고 표현하는데, 갑자기 사라지는 것이 아니기 때문에 부드러운 효과를 기대할 수 있다.

// dom Id가 testDiv인 항목을 펼친다.
$("#testDiv").slideDown() ;
 
// dom Id가 testDiv인 항목을 접는다.
$("#testDiv").slideUp() ;
 
 
 
// 속도를 지정할수도 있다 - slow, normal, fast
$("#testDiv").slideDown("slow") ;
$("#testDiv").slideUp("fast") ;
 
 
// 구체적인 시간을 명시할수도 있다. - 단위 milliseconds
// 0.5초 뒤에 점힘
$("#testDiv").slideUp(500) ;
 
 
// 1.5초 뒤에 펼쳐짐
$("#testDiv").slideDown(1500) ;


// 특정 함수를 실행할 수 있다.
$("#testDiv").slideUp(500, function(){
	alert("good");
}) ;

참고 : http://api.jquery.com/category/effects/sliding/