Показать и скрыть элемент с помощью jQuery
Главная / Показать и скрыть элемент с помощью jQuery
jQuery — это мощная библиотека Javascript, которая упрощает добавление полезных материалов Javascript на ваш веб-сайт в любых браузерах. В этом посте рассматривается, как показать и скрыть элемент с помощью jQuery, используя функции show(), hide(), toggle(), fadeIn() и fadeOut().
Пример HTML
Во всех следующих примерах используется абзац, который выглядит примерно так:
Это пример текста, который будет отображаться и скрываться.
Простое скрытие и отображение
Самый простой способ скрыть элемент с помощью jQuery — вызвать .hide(), а затем .show(), чтобы показать его снова. Это заставляет элемент мгновенно отображаться или скрываться.
Если бы у нас была пара кнопок, чтобы скрыть и показать абзац выше, они могли бы выглядеть так, хотя, конечно, вы обычно прикрепляли бы события к кнопке в функции готовности документа:
Вот приведенный выше пример в действии:
Это пример текста, который будет отображаться и скрываться.
Управление скоростью
Управляйте скоростью скрытия и отображения элемента, передавая «медленно» «нормально» или «быстро» или десятичное число, чтобы указать количество миллисекунд, в течение которых анимация будет длиться.
Это пример текста, который будет отображаться и скрываться.
функции toggle, fadeIn и fadeOut
Теперь давайте посмотрим, как работают функции toggle, fadeIn и fadeOut. Также есть более поздний пост, в котором показано, как сначала скрыть элемент с помощью CSS, а затем отобразить его с помощью jQuery.
Пример HTML
Во всех следующих примерах используется абзац, похожий на этот:
Это пример текста, который будет отображаться и скрываться.
Переключение элемента
Ранее я рассмотрел, как отображать и скрывать элементы с помощью jQuery, используя функции show() и hide(). Однако вы также можете просто переключить элемент, чтобы он отображался, если он скрыт, и скрыт, если отображается, используйте функцию toggle(). Он также поддерживает параметр скорости, который скрывает и показывает использование.
Это пример текста, который будет отображаться и скрываться.
Постепенное появление и исчезновение
И, наконец, вы также можете постепенное появление и исчезновение. Опять же, вы можете передать параметр скорости, и я сделал это, используя «slow» ниже:
Это пример текста, который будет отображаться и скрываться.