В этом посте освещаются ключевые различия между методами Hide() и FadeOut(), Show() и FadeIn() в jQuery.
Прежде чем перейти к разнице между методами display() и FadeOut(), show() и FadeIn() в jQuery, сначала ознакомьтесь с основами этих методов, прочитав следующие руководства:
- Метод FadeIn() jQuery
- Метод FadeOut() jQuery
- Метод JavaScript JQuery Hide() | Объяснено
- Метод JQuery Show() | Объяснено
Сначала посмотрите на разницу между методами Hide() и FadeOut() в jQuery.
Разница между скрытием() и исчезновением() в jQuery
Единственное и главное отличие между « скрывать() ' и ' исчезать() » метод:
- Временной интервал : « скрывать() ” по умолчанию скрывает элемент, немедленно меняя его непрозрачность со 100 на 0, не занимая никакого интервала времени, тогда как метод “ исчезать() » постепенно исчезает, т. е. постепенно скрывает элемент за «400 мс», что является его значением по умолчанию.
Посмотрим на практическую реализацию заявленного различия.
Сначала посмотрите на следующий HTML-код:
< центр >< идентификатор h2 '=' 'Н2' > Добро пожаловать в Linuxhint ! ч2 >
< кнопка > Скрыть элемент кнопка >
центр >
В приведенных выше строках кода:
- « <центр> Тег » регулирует выравнивание данных элементов по центру веб-страницы.
- « Тег «» создает подзаголовок уровня 2 с идентификатором «H2».
- « <кнопка> Тег ” вставляет новую кнопку.
Примечание: Приведенный выше HTML-код используется в этом руководстве.
Пример: применение метода jQuery «hide()» со значением «по умолчанию»
В этом примере применяется метод «hide()» со значениями по умолчанию, чтобы скрыть элемент:
< сценарий >$ ( документ ) . готовый ( функция ( ) {
$ ( 'кнопка' ) . щелкнуть ( функция ( ) {
$ ( '#H2' ) . скрывать ( ) ;
} ) ;
} ) ;
сценарий >
В приведенных выше строках кода:
- Во-первых, « готовый() ” применяется для выполнения указанных функций при загрузке текущего HTML-документа.
- Далее « нажмите() ” отвечает за выполнение связанной функции при нажатии кнопки.
- После этого « скрывать() «Метод немедленно скрывает доступный элемент заголовка с идентификатором «H2».
Выход
Видно, что элемент заголовка скрывается сразу при нажатии кнопки.
Пример: применение метода jQuery «fadeOut()» со значением «по умолчанию»
В этом примере используется метод «fadeOut()» со значениями по умолчанию, чтобы постепенно скрыть данный элемент за «400 мс».
В этом сценарии содержимое элемента «кнопка» изменяется:
< кнопка > исчезать ( Скрывать Элемент ) кнопка >Теперь реализуем метод «fadeOut()» следующим образом:
< сценарий >$ ( документ ) . готовый ( функция ( ) {
$ ( 'кнопка' ) . щелкнуть ( функция ( ) {
$ ( '#H2' ) . исчезать ( ) ;
} ) ;
} ) ;
сценарий >
В это время « исчезать() ” применяется для затемнения доступного элемента заголовка с 400 мс, то есть значением по умолчанию.
Выход
Вывод ясно показывает, что данное нажатие кнопки постепенно скрывает элемент заголовка в интервале времени по умолчанию, то есть «400 мс».
Разница между show() и FadeIn() в jQuery
Аналогично методам «hide()» и «fadeOut()», между методами «show()» и «fadeIn()» существует такая же разница:
- Временной интервал : « показывать() ” по умолчанию отображает скрытый элемент, немедленно изменяя его непрозрачность от 0 до 100, тогда как метод “ постепенное исчезновение() Метод «показывает скрытый элемент постепенно в течение 400 мс», что является его значением по умолчанию.
Пример: применение метода jQuery «show()» со значением «по умолчанию»
В этом примере применяется функция «show()» со значениями по умолчанию для отображения скрытого элемента.
Сначала посмотрите на предоставленный блок HTML-кода:
< центр >< кнопка > Показать элемент кнопка >
< идентификатор h2 '=' 'Н2' стиль '=' 'дисплей: нет' > Добро пожаловать в Linuxhint ! ч2 >
центр >
Согласно этому сценарию, данный элемент заголовка скрывается с помощью тега « дисплей: нет ' свойство.
Теперь следуйте данному блоку кода, чтобы понять практическую реализацию метода show():
< сценарий >$ ( документ ) . готовый ( функция ( ) {
$ ( 'кнопка' ) . щелкнуть ( функция ( ) {
$ ( '#H2' ) . показывать ( ) ;
} ) ;
} ) ;
сценарий >
В приведенном выше блоке кода используется « показывать() ” для немедленного отображения добавленного скрытого элемента.
Выход
Видно, что нажатие кнопки сразу показывает скрытый элемент заголовка.
Пример: применение метода jQuery «fadeIn()» со значением «по умолчанию»
В этом примере показан скрытый элемент с использованием метода «fadeIn()» со значением по умолчанию « 400 мс »:
Текст элемента кнопки изменяется согласно данному сценарию:
< кнопка > постепенное затухание ( Показывать Элемент ) кнопка >Теперь примените « постепенное исчезновение() ” с использованием следующего блока кода:
< сценарий >$ ( документ ) . готовый ( функция ( ) {
$ ( 'кнопка' ) . щелкнуть ( функция ( ) {
$ ( '#H2' ) . постепенное затухание ( ) ;
} ) ;
} ) ;
сценарий >
В этом блоке кода « постепенное исчезновение() «Метод используется для отображения скрытого элемента, который соответствует идентификатору «H2» через 400 мс, то есть значению по умолчанию.
Выход
Можно заметить, что данное нажатие кнопки постепенно отображает скрытый элемент в интервале времени по умолчанию, то есть «400 мс».
Заключение
В jQuery единственное ключевое различие между скрывать() и исчезать() , показывать() , и постепенное исчезновение() метод « Временной интервал ». Методы «show()» и «hide()» по умолчанию выполняют свои функции немедленно, тогда как методы «fadeIn()» и «fadeOut()» выполняют свои задачи в интервале времени по умолчанию, то есть «400 мс». В этом посте практически объяснены ключевые различия между методами Hide() и FadeOut(), Show() и FadeIn() в jQuery.