ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ
jQuery. Уроки для начинающих

jQuery Эффекты - Скрыть и Показать


Скрыть, показать, переключить, сдвинуть, исчезнуть и анимировать. ВОТ ЭТО ДА!

Кликните, чтобы показать/скрыть панель

Поскольку время ценно, мы быстро и легко обучаемся.

В W3Schools вы можете изучить все, что вам нужно, в доступном и удобном формате.


Примеры

jQuery hide()
Демонстрирует простой метод jQuery hide().

jQuery hide()
Еще одна демонстрация hide(). Как скрыть части текста.


jQuery hide() и show()

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

Пример

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

$("#show").click(function(){
  $("p").show();
});
Попробуйте сами »

Синтаксис:

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

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

Необязательный параметр скорости указывает скорость скрытия / отображения и может принимать следующие значения: "slow" (медленно), "fast" (быстро), или миллисекунды.

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

В следующем примере демонстрируется параметр скорости с hide():

Пример

$("button").click(function(){
  $("p").hide(1000);
});
Попробуйте сами »

jQuery метод toggle()

Вы также можете переключаться между скрытием и отображением элемента с помощью метода toggle().

Показанные элементы скрыты, а скрытые элементы показаны:

Пример

$("button").click(function(){
  $("p").toggle();
});
Попробуйте сами »

Синтаксис:

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

Необязательный параметр скорости может принимать следующие значения: "slow" (медленно), "fast" (быстро) или миллисекунды.

Необязательный параметр обратного вызова - это функция, которая должна выполняться после завершения toggle().


jQuery Упражнения

Проверьте себя с помощью упражнений

Упражнение:

Используйте метод jQuery, чтобы скрыть элемент <p> при клике на него.


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


jQuery Справочник эффектов

Чтобы получить полный обзор всех эффектов jQuery, перейдите на jQuery Справочник эффектов на нашем сайте W3Schools.