В этом посте будет объяснена практическая реализация метода FadeOut() jQuery для создания эффекта плавного затухания.
Как создать плавные эффекты затухания с помощью метода FadeOut() jQuery?
jQuery» исчезать() Метод постепенно скрывает выбранный элемент, уменьшая его непрозрачность. Этот метод изменяет состояние выбранного элемента с видимого на скрытое. Скрытый элемент не отображается на веб-странице до тех пор, пока пользователь не отобразит его снова с помощью кнопки « постепенное исчезновение() метод.
Синтаксис
$ ( селектор ) . исчезать ( скорость, замедление, обратный вызов ) ;
Приведенный выше синтаксис поддерживает следующие дополнительные параметры для настройки эффекта затухания:
- скорость: Он определяет скорость затухания эффекта в миллисекундах. По умолчанию его значение составляет «400 мс». Более того, он также поддерживает два встроенных значения «медленно» и «быстро».
- смягчение: Он показывает скорость затухания анимации в разных точках. По умолчанию его значение — «качаться (медленнее в начале/конце и медленно в середине)». Кроме того, он также работает на «линейном режиме (постоянная скорость при затухании анимации)».
- перезвонить: Он определяет определяемую пользователем функцию, которая выполняется после завершения анимации затухания для выполнения определенной задачи.
Давайте практически воспользуемся описанным выше методом.
HTML-код
Прежде чем перейти к методу «fadeOut()», посмотрите на следующий HTML-код, создающий образец элемента «div», к которому будет применен эффект затухания:
< кнопка > исчезать ( Скрывать Элемент ) кнопка >< бр >< бр >< идентификатор деления '=' 'myDiv' стиль '=' «высота: 80 пикселей; ширина: 300 пикселей; граница: 2 пикселя, сплошной черный; поля: авто; выравнивание текста: по центру» >
< ч2 > Добро пожаловать в Linuxhint ч2 >
div >
В приведенных выше строках кода:
- « <кнопка> Тег » добавляет элемент кнопки.
- « <дел> Тег » создает элемент div с идентификатором «myDiv» и стилизуется с помощью следующих свойств стиля (высота, ширина, граница, поля, выравнивание текста).
- Внутри div « Тег ” указывает первый элемент подзаголовка уровня 2.
Теперь начнем с первого примера.
Пример 1. Создание эффектов плавного затухания с помощью значения по умолчанию FadeOut()
В первом примере соответствующий элемент div скрывается с помощью метода FadeOut() со значением по умолчанию «400 мс»:
< сценарий >$ ( документ ) . готовый ( функция ( ) {
$ ( 'кнопка' ) . щелкнуть ( функция ( ) {
$ ( '#myDiv' ) . исчезать ( ) ;
} ) ;
} ) ;
сценарий >
В приведенных выше строках кода:
- Во-первых, « готовый() ” выполняет заданные функции при загрузке текущего HTML-документа/DOM.
- Далее « нажмите() Метод ” выполняет связанную функцию при нажатии кнопки, когда нажат связанный с ней селектор «кнопки».
- После этого « исчезать() Метод скрывает доступный элемент div с идентификатором «myDiv» через 400 мс, то есть значение по умолчанию.
Выход
Замечено, что данное нажатие кнопки постепенно затухает элемент div за «400 мс».
Пример 2. Создание эффектов плавного затухания с помощью параметра «скорость» FadeOut()
В этом примере используется метод «fadeOut()» со встроенными значениями (медленно/быстро) параметра «скорость»:
< сценарий >$ ( документ ) . готовый ( функция ( ) {
$ ( 'кнопка' ) . щелкнуть ( функция ( ) {
$ ( '#myDiv' ) . исчезать ( 'медленный' ) ;
} ) ;
} ) ;
сценарий >
Сейчас ' исчезать() метод передает метод « медленный ” в качестве параметра для плавного создания эффекта затухания, т. е. изменения состояния выбранного элемента div с видимого на скрытое.
Выход
Видно, что выбранный элемент div медленно скрывается при нажатии кнопки.
Пример 3. Создание эффектов плавного затухания с помощью параметра «длительность» FadeOut()
В этом примере применяется метод «fadeOut()» с определенным количеством миллисекунд в качестве параметра длительности:
< сценарий >$ ( документ ) . готовый ( функция ( ) {
$ ( 'кнопка' ) . щелкнуть ( функция ( ) {
$ ( '#myDiv' ) . исчезать ( 6000 ) ;
} ) ;
} ) ;
сценарий >
Теперь метод «fadeOut()» использует указанное количество миллисекунд, чтобы скрыть соответствующий элемент в течение заданного времени.
Выход
Приведенный выше вывод скрывает изменения данного элемента div при нажатии кнопки в заданный интервал времени.
Пример 4. Создание эффектов плавного затухания с помощью функции обратного вызова FadeOut().
В этом примере выполняется функция обратного вызова после завершения эффекта затухания с помощью метода «fadeOut()»:
< сценарий >$ ( документ ) . готовый ( функция ( ) {
$ ( 'кнопка' ) . щелкнуть ( функция ( ) {
$ ( '#myDiv' ) . исчезать ( 4000 , функция ( ) {
консоль. бревно ( «Данный элемент div успешно спрятан!» )
} ) ;
} ) ;
} ) ;
сценарий >
В указанном блоке кода:
- « исчезать() ” затемняет соответствующий элемент div за определенное количество миллисекунд, а затем выполняет предоставленную функцию “обратного вызова”.
- Внутри ' перезвонить », функция « консоль.log() Метод применяется для отображения указанного оператора после завершения эффекта «затухания».
Выход
Видно, что «консоль» показывает оператор, определенный в функции обратного вызова после сокрытия данного элемента div.
Пример 5. Создание эффектов плавного затухания с помощью параметра «easing» FadeOut()
В этом примере применяется метод «fadeOut()» с возможными значениями параметра «easing»:
< сценарий >$ ( документ ) . готовый ( функция ( ) {
$ ( 'кнопка' ) . щелкнуть ( функция ( ) {
$ ( '#myDiv' ) . исчезать ( 4000 , 'линейный' ) ;
} ) ;
} ) ;
сценарий >
Сейчас ' исчезать() ” выполняет эффект затухания за определенное количество миллисекунд с постоянной скоростью из-за “ линейный ' ценить.
Выход
Выходные данные изменяют данное состояние элемента с видимого на скрытое с постоянной скоростью. Вот и все, что касается реализации эффекта «затухания» на элементе.
Заключение
Чтобы создать эффект плавного затухания, используя функцию jQuery « исчезать() ” пользователю не требуются никакие дополнительные параметры. Этот метод постепенно исчезает, т. е. постепенно скрывает элемент, изменяя его непрозрачность. Если пользователю необходимо выполнить эффект затухания за определенное количество миллисекунд, выполните функцию обратного вызова, а затем используйте параметры «speed», «easing» и «callback» с помощью метода «fadeOut()». В этом посте практически объясняется метод jQuery FadeOut() для создания эффекта плавного затухания.