jQuery метод .slideUp()

Визначення та застосування

jQuery метод.slideUp()плавно приховує вибрані елементи ковзним рухом (поступово зменшуючи їхню висоту). Для того, щоб плавно відобразити вибрані елементи ковзним рухом, ви можете скористатися методом .slideDown(), або методом.slideToggle(), який відображає, або приховує вибрані елементи ковзним рухом.

jQuery синтаксис:

Доданий у версії jQuery

Значення параметрів

duration(за замовчуванням:400). Тип: Number, або String. Рядкове або числове значення, яке визначає, як довго анімація триватиме (дивися вище).
easing(за замовчуванням:swing). Тип: String . Ключове слово (рядок), яке визначає криву швидкості для анімації (дивися вище).
queue(за замовчуванням:true). Тип: Boolean, або String. Логічне значення, яке вказує, чи слід розміщувати анімацію в черзі ефектів. Якщо вказано false, анімація почнеться відразу ж. З версіїjQuery 1.7опціяqueueтакож може приймати рядок, у цьому випадку анімацію буде додано до черги, представленої цим рядком. Коли використовується ім'я користувача черги анімації, то вона не запускається автоматично, ви повинні при цьому використовувати метод.dequeue(" ім'я черги " ), щоб запустити її.
specialEasing. Тип: PlainObject. Об'єкт, що містить одну або кілька властивостей CSS, визначених параметром властивості та відповідні їм функції уповільнення.Додано у версії 1.4.
step. Тип: Function (Numbernow,Tweentween). Функція викликається для кожного анімованого властивості кожного анімованого елемента. Ця функціядає можливість змінювати Tween Object, щоб змінити значення властивості, перш ніж буде встановлено.
progress. Тип: Function . Функція, яка буде викликатись після кожного кроку анімації, лише один раз для кожного анімованого елемента, незалежно від кількості анімованих властивостей.Додано у версії 1.8.
complete. Тип: Function . Функція (callback), яка буде виконана після завершення анімації, вона викликається один раз для кожного відповідного елемента (див. вище).
start. Тип: Function (Promise Objectanimation). Функція викликається, коли анімація елемента починається.Додано у версії 1.8.
done. Тип: Function (Promise Objectanimation,BooleanjumpedToEnd). Функція викликається, коли анімація елемента завершується.Додано у версії 1.8.
fail. Тип: Function (Promise Objectanimation,BooleanjumpedToEnd). Функція викликається, коли анімацію елемента не вдається завершити.Додано у версії 1.8.
always. Тип: Function (Promise Objectanimation,BooleanjumpedToEnd). Функція викликається, коли анімація елемента завершується або зупиняється незавершеною.Додано у версії 1.8.

Приклад використання

У цьому прикладі з використанням jQuery методів.slideUp()та .slideDown() ми при натисканні на певну кнопку плавно відображаємо або приховуємо ковзним рухом вибрані елементи

Результат нашого прикладу:

Приклад використання jQuery методів .slideDown() та .slideUp() (без параметрів).

Розглянемо наступний приклад у якому задамо методи.slideUp()і .slideDown() різнізначення тривалості анімації:

У цьому прикладі з використанням jQuery методів.slideUp()та .slideDown() ми при натисканні на певну кнопку плавно приховуємо або відображаємо всі елементи

Результат нашого прикладу:

Приклад використання jQuery методів .slideDown() та .slideUp() (різна швидкість анімації).

Розглянемо наступний приклад у якому задамо методам.slideUp()та .slideDown() не тільки тривалість анімації, але й вкажемо швидкість анімації та функцію, яка буде виконана після завершення анімації:

У цьому прикладі з використанням jQuery методів.slideUp()та .slideDown() ми при натисканні на певну кнопку приховуємо або відображаємо всі елементи

Результат нашого прикладу:

Приклад використання jQuery методів .slideDown() та .slideUp() (з callback функцією).

Розглянемо наступний приклад у якому передамо як параметр методів.slideUp()і .slideDown() об'єкт, що містить різні опції, які контролюватимуть анімацію:

тривалість анімації дорівнює800мілісекунд (duration: 800)
ефект анімації відбувається з однаковою швидкістю від початку до кінця (easing: linear)
функція, яка після завершення анімації знаходить елемент із класомstatusі додає текстову інформацію (complete: function).
анімація не розміщується у черзі ефектів (queue: false).

Результат нашого прикладу:

Приклад використання jQuery методів .slideDown() та .slideUp() (об'єкт з опціями якпараметра). jQuery ефекти