Новини високих технологій
» » Функція jQuery fadeIn(): зміна прозорості елемента

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

15-04-2018, 21:29
311
Анімація на сучасних веб-сторінках давно стала чимось само собою зрозумілим. Розчиняються елементи, що вилітають повідомлення, ковзні галереї зображень покращують користувальницький досвід і збільшують показники сайту. У популярній 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({});
  • 'fast' (200ms);
  • 'slow' (600ms);

Якщо значення 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 , а перед його появою це правило скасовується.
Цікаво по темі
Як видалити Apple ID і змінити дані на пристрої
Як видалити Apple ID і змінити дані на пристрої
Apple ID - це обліковий запис, що створюється користувачем при покупці якого-небудь пристрою від компанії Apple. І рано чи пізно виникає ситуація,
Метод appendTo в jQuery: вставка елементів
Метод appendTo в jQuery: вставка елементів
Синтаксис і особливості використання методу appendTo в бібліотеці jQuery. Контекст виклику, вхідні параметри і значення, що повертається. Специфіка
PHP-масив: видалити елемент перший, останній, по значенню
PHP-масив: видалити елемент перший, останній, по значенню
Масиви PHP використовуються повсюдно. Додавання і зміна значень, як правило, не викликає труднощів. Видалення елементів масиву - особлива операція.
Функція rotate в CSS: двовимірне обертання елемента
Функція rotate в CSS: двовимірне обертання елемента
Функція rotate() в CSS здійснює над елементом двовимірну трансформацію обертання навколо нерухомого центру. Блок при цьому не деформується і не
Властивість CSS opacity: управління прозорістю
Властивість CSS opacity: управління прозорістю
Зміна прозорості елементів за допомогою властивості CSS opacity. Приклади використання, інтервал можливих значень, спадкування. Управління прозорістю
Як здійснити запис у файл Java
Як здійснити запис у файл Java
При написанні програм на мові Java рано чи пізно постане необхідність читання і запису інформації в файл. Для цього в мові передбачені наступні