Анімація в jQuery. Частина 3

33

Від автора: вітаю вас, друзі. Отже, ми продовжуємо вивчення методів jQuery, що дозволяють реалізувати ефекти анімації. Сьогодні ми розглянемо декілька методів групи fade, а саме: fadeIn, fadeOut та інших, що працюють з непрозорістю елемента.

Отже, методи групи fade анимируют елемент за рахунок його властивості непрозорості (opacity), тобто для зникнення елемента значення властивості opacity плавно змінюється від 1 до 0. При досягненні нуля властивість display елемента стає none. І, навпаки, для плавного появи елемента значення змінюється від 0 до 1.

Синтаксис використання методів fade аналогічний уже вивчених нами методів hide, show і методам групи slide. Давайте візьмемо приклад з попереднього уроку і замінимо методи slideUp і slideDown методами fadeOut і fadeIn відповідно.

$(function(){
$(‘#hide’).click(function(){
$(‘.panel-body’).fadeOut();
});
$(‘#show’).click(function(){
$(‘.panel-body’).fadeIn();
});
});

Ми використовували лише інший набір методів, нічого більше в коді не змінили, решті код залишився колишнім. При цьому ми отримали інший тип анімації. Замість згортання і розгортання елемента, тепер він плавно розчиняється і проявляється. Досить симпатичний ефект.

Як і у випадку з методами slide, fade є також метод, що поєднує в собі обидві функції – поява і розчинення – це метод fadeToggle, який покаже елемент, якщо він прихований, і приховає його, якщо він показується.

Сховати / Показати
$(function(){
$(‘#btn’).click(function(){
$(‘.panel-body’).fadeToggle();
});
});

І останній метод, з яким ми познайомимося, — метод fadeTo. Даний метод дозволяє змінити непрозорість елемента до певного значення. Першим параметром ми можемо передати значення в мілісекундах, протягом якого буде працювати анімація. Другим параметром передаємо значення непрозорості від 0 до 1.

Наприклад, при кліці по першій кнопці зробимо елемент напівпрозорим за півсекунди, а при кліці по другій кнопці повернемо колишнє значення непрозорості миттєво.

Напівпрозорий
Непрозорий
$(function(){
$(‘#hide’).click(function(){
$(‘.panel-body’).fadeTo(500, .5);
});
$(‘#show’).click(function(){
$(‘.panel-body’).fadeTo(0, 1);
});
});

Як бачимо, робота з різними методами анімації дуже схожа, при цьому використання тих чи інших методів дає нам різний ефект анімації. На цьому ми завершимо поточну статтю. Більше про jQuerу ви можете дізнатися з наших уроків або курсу. Удачі!