Вернуться назад Распечатать

Функція jQuery fadeIn(): зміна прозорості елемента

Анімація на сучасних веб-сторінках давно стала чимось само собою зрозумілим. Розчиняються елементи, що вилітають повідомлення, ковзні галереї зображень покращують користувальницький досвід і збільшують показники сайту. У популярній jаvascript бібліотеці jQuery fadeIn() - одна з базових анімаційних функцій. Вона управляє прозорістю блоків.

Fade-ефекти

Метод fadeIn() забезпечує зміну прозорості переданого йому елемента до значення 100%. У бібліотеці jQuery він йде в парі з функцією fadeOut(), за допомогою якої можна обнулити прозорість і тим самим "розчинити" елемент. Подібного ефекту можна досягти за допомогою методу fadeTo(), діапазон впливу якого ще ширше. FadeTo() може встановити будь-яке значення прозорості в діапазоні від 0 до 1.

Синтаксис методу

Метод fadeIn() в jQuery викликається в контексті елемента, прозорість якого необхідно змінити. Може приймати від нуля до трьох параметрів:

element.fadeIn();
element.fadeIn(duration);
element.fadeIn(duration, callback);
element.fadeIn(duration, easing, callback);
element.fadeIn(config);

Аргумент duration визначає час, протягом якого буде здійснена анімація. Це може бути цифра позначає кількість мілісекунд, або одне з ключових слів:

<script async="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
<!-- fb_336x280_1 -->

<script> (adsbygoogle = window.adsbygoogle ||[]).push({});

Якщо значення duration не встановлено, воно за замовчуванням буде дорівнює 400 мілісекунд.

Параметр callback позначає функцію, яка буде викликана відразу після завершення анімації. Ніяких параметрів callback-функція не приймає. Змінна this всередині неї посилається на змінюваний DOM-вузол.

Аргумент easing керує тимчасової функцією анімації, тобто її швидкістю в залежності від часу. З його допомогою можна прискорити початок і уповільнити кінець анімації або зробити її рівномірної на всьому протязі. Значенням аргументу є рядок, що містить ключове слово, за замовчуванням це функція 'swing' .

У наступному прикладі jQuery fadeIn() буде рівномірно збільшувати прозорість елемента з класом .block протягом однієї секунди, після чого виведе повідомлення в консолі: 

  $('.block').fadeIn(1000 linear, function() {
 console.log('Анімація завершена'); 
});

Якщо перерахованих параметрів недостатньо, методом можна передати об'єкт config , який може містити до 11 різних налаштувань.

<script async="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
<!-- fb_336x280_2 -->

<script> (adsbygoogle = window.adsbygoogle ||[]).push({});

Функції зворотного виклику

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

  const callback = function() {
 console.log('Анімація завершена'); 
}; 
 $('.element').fadeIn(1000); 
 callback();

У цьому прикладі функція запускається відразу після початку анімації, не чекаючи повного появи елемента.

Щоб усе спрацювало як задумано, слід використовувати аргумент callback , що дозволяє відловити кінець анімації: 

  const callback = function() {
 console.log('Анімація завершена'); 
}; 
 $('.element').fadeIn(1000 callback);

Тепер повідомлення в консоль буде виведено тільки тоді, коли елемент стане повністю бачимо.

Повна прозорість і приховування елемента

Як відомо, нульове значення властивості opacity не прибирає елемент зі сторінки, а лише робить його невидимим. Така поведінка не годиться, якщо ми хочемо заховати якийсь блок.


Тому fade-методи бібліотеки jQuery: fadeIn(), fadeTo() і fadeOut() працюють з прозорістю в комбінації з властивістю display . Повністю прозорий елемент ховається за допомогою правила display: none , а перед його появою це правило скасовується.