jQuery는 HTML 페이지의 이벤트에 응답하도록 맞춤 제작되었습니다.

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

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

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

선택할 수 있는 speed 매개 변수는 숨기기/보이기 속도를 지정하며, “slow”, “fast” 또는 밀리 초 값을 사용할 수 있습니다.

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

다음 예제는 hide()로 속도 매개 변수를 보여줍니다.

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

toggle() 메서드를 사용하여 요소 숨기기와 표시하기 사이에서 토글(toggle) 할 수도 있습니다.

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

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

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

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

선택할 수 있는 매개 변수는 toggle()이 완료된 후 실행되는 함수입니다.

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