jQuery метод .fadeIn()

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

jQuery метод.fadeIn()дозволяє плавно змінити прозорість для окремих елементів (з прихованого стану у видимий). Іншими словами, метод здійснює анімацію зміни прозорості вибраних елементів плавно переводячи їх із прихованого стану у видимий.

Звертаю Вашу увагу, що для того, щоб перевести елемент з видимого стану в прихований, змінюючи прозорість елемента, ви можете скористатися jQuery методом .fadeOut().

jQuery синтаксис:

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

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

ПараметрОпис

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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