✅ Слайд в JQuery - 3 метода jQuery Slide с программированием

Введение в слайд в jQuery

Введение в слайд в jQuery

JQuery быстр и является одной из многих библиотек JavaScript. Это упрощает общие задачи JavaScript. В дополнение ко всем функциям, которые он содержит с помощью Jquery, мы можем создавать свои собственные пользовательские эффекты, среди которых скользящие эффекты. Скольжение - это способ скрыть и раскрыть элемент. В Jquery мы можем анимировать элемент с помощью скользящих эффектов. Он состоит из 3 способов изменить видимость элемента. Они скользят вверх, скользят вниз и переключаются. Скользящие эффекты поддерживают функции и скорости обратного вызова.

Методы Слайда в jQuery

В Jquery есть 3 метода: slideUp (), SlideDown () и slideToggle ():

1. slideUp ()

Метод SlideUp () скрывает элемент, выбранный с помощью анимации. Он ничего не возвращает, а просто скрывает элемент. Мы можем анимировать изображения также, поскольку это изменяет высоту изображения или элемента.

Синтаксис:

$(selector) .slideUp( (duration)(, easing) (, function()))

Параметры:

Длительность: Длительность может быть строкой или числом. Это может быть время в миллисекундах или предустановка. Значение длительности по умолчанию составляет 400 миллисекунд. Он может принимать медленный, быстрый или обычный как строковый параметр. Это помогает нам контролировать анимацию слайдов в соответствии с нашими требованиями.
Ослабление: ослабление должно быть строкового типа. Используется для перехода. Значением по умолчанию является колебание.
Функция: дополнительная функция обратного вызова будет выполнена после завершения анимации.

Примеры # 1: Это пример метода slideUp (). В этом разделе мы передали параметры пустыми, т. Е. Нормальные (первые) для абзаца, поэтому значение по умолчанию составляет 400 миллисекунд. Далее мы передали строку «быстро» и «медленно».

Код:

Example of jQuery Slide-Up p( padding: 30px; background: Red; ) $(document).ready(function()( $(".up-btn").click(function()( $("p.normal").slideUp(); $("p.fast").slideUp("fast"); $("p.slow").slideUp("slow"); )); )); Slide Up Paragraphs

Этот абзац является примером для слайдов вверх со скоростью по умолчанию.

Этот абзац является примером для слайдов с быстрой скоростью.

Этот абзац является примером для слайдов вверх с медленной скоростью.

Выход:

На выходе отображаются абзацы.

При нажатии на кнопку слайдов вверх три абзаца будут скрыты.

Примеры № 2: В этом примере мы передали «секунды» для параметра длительности.

Код:

Example of jQuery Slide-Up p( padding: 30px; background: Red; ) $(document).ready(function()( $(".up-btn").click(function()( $("p.very-fast").slideUp(50); $("p.very-slow").slideUp(20000); )); )); Slide Up Paragraphs

Этот абзац является примером для слайдов вверх с очень высокой скоростью.

Этот абзац является примером для слайдов вверх с очень медленной скоростью.

Выход:

В выводе мы можем наблюдать, что он отображает два абзаца.

При нажатии на кнопку сдвига вверх по абзацам мы можем заметить, что первый абзац был скрыт сразу, так как он занял время 50 миллисекунд.

В то время как второй абзац медленно скрывается, он занял 20000 миллисекунд. Мы видим, что размер медленно уменьшается и становится скрытым.

2. slideDown ()

Метод SlideDown () покажет элемент, выбранный с помощью анимации.

Синтаксис:

$(selector) .slideDown( (duration)(, easing) (, function()))

Параметры:

Длительность: Длительность может быть строкой или числом. Это может быть время в миллисекундах или предустановка. Значение длительности по умолчанию составляет 400 миллисекунд. Это также может быть медленно, быстро или нормально. Это помогает нам контролировать анимацию слайдов.
Ослабление: ослабление должно быть строкового типа. Используется для перехода. Значением по умолчанию является колебание.
Функция: дополнительная функция обратного вызова будет выполнена после завершения анимации.

Пример: это пример метода slideDown ().

Код:

Example of jQuery Slide-Up and Slide-Down Effects p( padding: 30px; background: Red; ) $(document).ready(function()( $(".up-btn").click(function()( $("p.normal").slideUp(); )); $(".down-btn").click(function()( $("p.normal").slideDown(); )); )); Slide Up Paragraph Slide Down Paragraph

Этот абзац исчезнет со скоростью по умолчанию.

Выход:

После выполнения программы.

При нажатии на слайд вверх абзац скрыт.

При нажатии на скользящий абзац абзац отображается. Мы можем видеть на изображении ниже.

3. slideToggle ()

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

Синтаксис:

$(selector) .slideToggle( (duration)(, easing) (, function()))

Параметры:

Длительность: Длительность может быть строкой или числом. Это может быть время в миллисекундах или предустановка. Значение длительности по умолчанию составляет 400 миллисекунд. Это также может быть медленно, быстро или нормально. Это помогает нам контролировать анимацию слайдов в соответствии с нашими требованиями.
Ослабление: ослабление должно быть строкового типа. Используется для перехода. Значением по умолчанию является колебание.
Функция: дополнительная функция обратного вызова будет выполнена после завершения анимации.

Пример: это пример для метода slideToggle ().

Код:

Example of jQuery Toggle Effect p( padding: 30px; background: Red; ) $(document).ready(function()( $(".toggle-btn").click(function()( $("p.normal").slideToggle(); )); )); Slide toggle Paragraph

Этот абзац исчезнет со скоростью по умолчанию и будет переключаться при нажатии на кнопку.

Выход:

Выполнение программы.

При нажатии на кнопку (слайд переключателя абзаца) скрыто.

При нажатии на ту же кнопку (слайд переключателя абзаца) она отображается.

Так что это методы Slide в jQuery.

Слайд в JQuery - 3 метода jQuery Slide с программированием