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

42

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

На сьогоднішній день анімувати елементи сторінок ми можемо, використовуючи можливості CSS3. Можливості CSS дійсно далеко зробили крок у цьому плані. Однак бібліотека jQuery дозволяє реалізувати деякі завдання простіше і, часом, без неї не обійтися для вирішення тих чи інших завдань.

Отже, давайте почнемо знайомитися з методами, які дозволяють маніпулювати елементами сторінки і управляти ефектами анімації. Перші два методи — методи show() і hide(). Як випливає з назви, методи відповідають за показ і приховування елемента, до якого застосований метод. Давайте поглянемо на приклад, приховаємо, приміром, одну картинку і покажемо другу.

Анимация в jQuery

Як бачимо, друга картинка не відображається, оскільки вона прихована через display:none. Тепер викличемо метод hide() для першого зображення та show() — для другого.

$(function(){
$(‘#img1’).hide();
$(‘#img2’).show();
});

А ось тепер картинка міста прихована, а ось зображення милого котика — показується.

Анимация в jQuery

А де ж тут анімація, запитаєте ви? Картинки миттєво ховаються і показуються. Насправді ми можемо уповільнити обидва процесу, отримавши, відповідно, певний ефект анімації. Для того, щоб сповільнити, просто передамо першим параметром функції значення в мілісекундах, за яку повинен відпрацювати метод. Наприклад, якщо ми хочемо спостерігати роботу методу протягом напівсекунди передамо значення 500:

$(function(){
$(‘#img1’).hide(500);
$(‘#img2’).show(500);
});

Поновіть сторінку, ми досягли задуманого — картинки зникають і з’являються з анімаційним ефектом. При частці фантазії ми вже навіть з таким примітивним кодом можемо домогтися симпатичного ефекту.

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

Повернути

І невеликий код на jQuery:

$(function(){
$(‘img’).click(function(){
$(this).hide(300);
});
$(‘#btn’).click(function(){
$(‘img’).show(300);
});
});

Тепер при кліці по кожній картинці вона буде зникати з ефектом анімації, а при кліку по кнопці — картинки будуть повертатися. Також методи hide і show можуть приймати callback функцію, в якій ми можемо виконати додаткові дії:

$(function(){
$(‘img’).click(function(){
$(this).hide(300, function(){
alert(‘Картинка зникла’);
});
});
$(‘#btn’).click(function(){
$(‘img’).show(300);
});
});

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