[jQuery] hide(), show()를 이용한 객체 감추기/보이기

css style의 display 속성을 이용하면 HTML의 특정 객체를 숨기거나 보여지게 할 수 있는데, 이러한 display 항목을 jquery 에서도 아주 쉬운 방법으로 사용이 가능하다. 

예를들어 기존에 자바스크립트에서 document.getElementById("test").style.display="none" 처럼 사용하던것을 jquery를 이용하면 $("#test").hide() 로 보다 간결하게 사용할 수 있다.


또 hide(), show()에는 몇가지 옵션도 지정할 수 있는데 아래 예제를 보면 쉽게 이해가 갈 것이다.

// dom Id가 testDiv인 항목을 숨긴다.
$("#testDiv").hide() ;

// dom Id가 testDiv인 보여준다.
$("#testDiv").show() ;



// 속도를 지정할수도 있다 - slow, normal, fast
$("#testDiv").hide("slow") ;
$("#testDiv").show("fast") ;


// 구체적인 시간을 명시할수도 있다. - 단위 milliseconds

// 0.5초 뒤에 숨김
$("#testDiv").hide(500) ;


// 1.5초 뒤에 보여짐
$("#testDiv").show(1500) ;