jQuery 입문 | 이펙트(effect) 효과 | 요소의 표시와 숨김 .hide() .show() .toggle()

요소의 표시와 숨김

.show() 메소드는 선택한 요소를 순간적으로 사라지게 하고, .hide() 메소드는 나타나게 한다.

.hide() .show() 메소드 - 요소의 표시와 숨김

.hide() 메소드를 통해 숨겨진 요소는 CSS display 속성값이 none으로 설정하여, 요소를 숨긴다. .show() 메소드를 통해 숨겨진 요소를 CSS display 속성값이 block으로 설정하여, 요소를 표시한다.

$("#btnHide").on("click", function() {
  $("div").hide();
});
$("#btnShow").on("click", function() {
  $("div").show();
});

위 예제에서는 <div> 요소를 .hide() 메소드로 숨겼다가, .show() 메소드로 표시한다.

코드 실행

CSS의 visibility 속성의 속성값을 hidden으로 설정해도 HTML 요소를 숨길 수 있다.
하지만 이때는 보이지만 않을 뿐 숨겨진 요소는 여전히 웹 페이지의 레이아웃에 영향을 주게 된다.

.hide() .show() 메소드 - 효과 속도 설정

인수로 밀리초(ms)로 설정하거나 “slow”, “fast"와 같은 예약어를 전달하여, 이펙트 효과의 속도를 설정할 수도 있다.

$("#btnHide").on("click", function() {
  $("div").hide(1000);
});
$("#btnShow").on("click", function() {
  $("div").show("fast");
});

위 예제에서는 .hide() 메소드와 .show() 메소드에 효과의 속도를 설정하고 있다.

코드 실행

.toggle() 메소드 - 요소의 표시 상태 토글

jQuery에서는 선택한 요소의 현재 표시 상태에 따라 다른 동작을 하는 .toggle() 메소드가 있다.
선택한 요소가 현재 사라진 상태라면 .show() 메소드의 동작을 수행하고, 나타나 있는 상태라면 .hide() 메소드의 동작을 수행한다.

$("#btnToggle").on("click", function() {
  $("div").toggle();
});

위 예제에서는 id가 btnToggle인 요소를 클릭하면 <div> 요소가 번갈아 가면서 표시가 되었다가 숨겨진다.

코드 실행