Методы jQuery show() и hide()

Вы можете отображать и скрывать HTML-элементы с помощью методов jQuery show() и hide().

Метод hide() просто устанавливает онлайн параметр style="display: none" для выбранных элементов. И наоборот, метод show() восстанавливает свойства отображения элементов до того, чем они были изначально - обычно block, inline или inline-block. Например:

<script type="text/javascript">
  $(document).ready(function(){
    // Скрыть параграфы
    $(".hide-btn").click(function(){
      $("p").hide();
    });

    // Показать скрытые параграфы
    $(".show-btn").click(function(){
      $("p").show();
    });
  });
</script>

При желании вы можете указать параметр длительности (также называемый скоростью), чтобы сделать эффект скрытия jQuery анимированным в течение указанного периода времени.

Длительность может быть указана либо с использованием одной из предопределенных строк "slow" или "fast", либо в количестве миллисекунд для большей точности; более высокие значения указывают на более медленную анимацию.

<script type="text/javascript">
  $(document).ready(function(){
    // Скрыть параграфы с разной скоростью
    $(".hide-btn").click(function(){
      $("p.normal").hide();
      $("p.fast").hide("fast");
      $("p.slow").hide("slow");
      $("p.very-fast").hide(50);
      $("p.very-slow").hide(2000);
    });

    // Показать параграфы с разной скоростью
    $(".show-btn").click(function(){
      $("p.normal").show();
      $("p.fast").show("fast");
      $("p.slow").show("slow");
      $("p.very-fast").show(50);
      $("p.very-slow").show(2000);
    });
  });
</script>

Вы также можете указать функцию обратного вызова (callback), которая будет выполняться после завершения методов show() или hide(). Мы узнаем больше о функциях типа коллбэк в следующих главах.

<script type="text/javascript">
  $(document).ready(function(){
    // Показать сообщение типа алерт после скрытия параграфа 
    $(".hide-btn").click(function(){
      $("p").hide("slow", function(){
        // Код коллбэк функции
        alert("The hide effect is completed.");
      });
    });

    // Показать сообщение типа алерт после отображения параграфа
    $(".show-btn").click(function(){
      $("p").show("slow", function(){
        // Код коллбэк функции
        alert("The show effect is completed.");
      });
    });
  });
</script>

Метод jQuery toggle()

Метод jQuery toggle() отображает или скрывает элементы таким образом, что если элемент отображается изначально, он будет скрыт; если он скрыт, он будет показан (т.е. метод как бы «переключает видимость»).

<script type="text/javascript">
  $(document).ready(function(){
    // Переключение видимости параграфа
    $(".toggle-btn").click(function(){
      $("p").toggle();
    });
  });
</script>

Точно так же вы можете указать параметр duration (длительность) для метода toggle(), чтобы сделать его анимированным, как и для методов show() и hide().

<script type="text/javascript">
  $(document).ready(function(){
    // Переключает видимость параграфов с разной скоростью
    $(".toggle-btn").click(function(){
      $("p.normal").toggle();
      $("p.fast").toggle("fast");
      $("p.slow").toggle("slow");
      $("p.very-fast").toggle(50);
      $("p.very-slow").toggle(2000);
    });
  });
</script>

Точно так же вы можете также указать функцию обратного вызова (callback) для метода toggle().

<script type="text/javascript">
  $(document).ready(function(){
    // Показать сообщение после переключения видимости параграфа
    $(".toggle-btn").click(function(){
      $("p").toggle(1000, function(){
        // Код функции коллбэк
        alert("The toggle effect is completed.");
      });
    });
  });
</script>