Анімація в jQuery. Частина 4. Метод animate

38

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

Отже, ми з вами вже знаємо кілька методів, які дозволяють організувати досить симпатичні ефекти анімації в jQuery — це методи групи fade і slide, а також прості методи hide і show.

Однак ці методи обмежені у своїй дії. Так, методи slide дозволяють анімувати висоту елементи, створюючи ефект слайдинга. Методи fade працюють з непрозорістю елемента, дозволяючи створювати ефект розчинення. А що якщо ми хочемо анімувати відразу кілька властивостей?

У реалізації задуманого нам знадобиться метод animate, який вміє працювати з будь-якими властивостями, дозволяючи таким чином створювати власну анімацію. Синтаксис функції animate відрізняється від вивчених раніше методів. Першим параметром ми повинні передати об’єкт властивостей та їх значень для анимирования. Другим параметром ми можемо передати тривалість анімації в мілісекундах. Також в функцію можна передавати й інші необов’язкові параметри, наприклад функцію зворотного виклику, але частіше метод animate використовується з зазначеними двома першими параметрами.

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

Анимация в jQuery

І невеликий код jQuery, додає трохи магії:

$(function(){
$(‘img’).hover(
function(){
$(this).animate({
ширина: 600,
height: 300,
opacity: 1
}, 500);
},
function(){
$(this).animate({
width: 400,
height: 200,
opacity: .5
}, 500);
}
);
});

В результаті при наведенні курсору миші на картинку вона буде плавно збільшуватися і стає непрозорою. При відведенні курсору — картинка повернеться в колишній стан.

Анимация в jQuery

Давайте пройдемося по написаному кодом. По-перше, ми використовували функцію hover, яка встановлює обробник для подій mouseenter і mouseleave, тобто появи курсору над елементом і виходу курсору з елемента. Відповідно, при появі курсору на картинці ми виконуємо одну функцію, а при виході — іншу.

Всередині кожної з функцій ми використовували метод animate, всередині якого і анимируем необхідні нам CSS властивості елемента. Все просто, чи не так? При цьому виглядає такий ефект досить симпатично. Звичайно, даний код досить примітивний і не позбавлений недоліків. Наприклад, картинок може бути багато і у кожного можуть бути свої розміри, тому зашивати розміри в код недоцільно, оскільки такий код працює коректно тільки для однієї картинки з вказаними розмірами. Можете спробувати самостійно написати більш універсальний код, який буде працювати для зображень різних розмірів.

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