jQuery 효과 - 숨기기 및 표시


숨기기, 표시, 토글, 슬라이드, 페이드 및 애니메이트. 와!

패널 표시/숨기기 클릭

시간은 소중하기 때문에 빠르고 쉬운 학습을 제공합니다.

W3Schools에서는 배우기 위해 필요한 모든 것을 접근 가능하고 편리한 형식으로 공부할 수 있습니다.



간단한 jQuery hide() 메서드를 보여줍니다.


또 다른 hide() 데모. 텍스트의 일부를 숨기는 방법.


jQuery 숨기기() 및 표시()

hide()jQuery를 사용하면 및 show()메서드 를 사용하여 HTML 요소를 숨기거나 표시할 수 있습니다 .

예시

$("#hide").click(function(){
  $("p").hide();
});

$("#show").click(function(){
  $("p").show();
});

통사론:

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

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

선택적 속도 매개변수는 숨기기/표시의 속도를 지정하고 "slow", "fast" 또는 밀리초 값을 사용할 수 있습니다.

hide()선택적 콜백 매개변수는 또는 메소드가 완료된 후에 실행되는 show()함수입니다(이후 장에서 콜백 함수에 대해 자세히 알아볼 것입니다).

다음 예는 다음을 사용하여 속도 매개변수를 보여줍니다 hide().

예시

$("button").click(function(){
  $("p").hide(1000);
});


jQuery 토글()

toggle()메서드 를 사용하여 요소를 숨기거나 표시하는 사이를 전환할 수도 있습니다 .

표시된 요소는 숨겨지고 숨겨진 요소는 표시됩니다.

예시

$("button").click(function(){
  $("p").toggle();
});

통사론:

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

선택적 속도 매개변수는 "slow", "fast" 또는 밀리초 값을 사용할 수 있습니다.

toggle()선택적 콜백 매개변수는 완료 후 실행할 함수 입니다.


jQuery 연습

연습으로 자신을 테스트하십시오

연습:

jQuery 메소드를 사용하여 클릭할 때 <p> 요소 를 숨깁니다 .

$("p").click(function(){
  $(this).();
});


jQuery 효과 참조

모든 jQuery 효과에 대한 전체 개요를 보려면 jQuery 효과 참조 로 이동하십시오 .