Анімація в jQuery та CSS
Анімація в jQuery
Show, hide
.hide( [ duration ] [, complete ] ); - параметри функції: тривалість анімації та call-back функція, що виконається по закінченню анімації.
$('.submenu').hide(); - ховає елемент моментально (display: none).
$('.submenu').show(); - відображає елемент моментально.
$('.submenu').toggle(); - ховає або відображає елемент.
$('.submenu').hide('slow'); - можна ховати та відображати елемент плавно, змінюючи його розміри від 0 до реальних. В якості аргумента використовується строка 'slow', 'fast' або число - кількість мілісекунд.
$('.submenu').hide(2000, function(){ $(this).addClass('hidden'); }); - після анімації можна викликати функцію, яка виконає якісь дії.
click me ==> Element
click me ==> Slow animation
$('button').on('click', function(){
$('.box').toggle();
});
$('button').on('click', function(){
$('.box').toggle(3000, function(){ alert('animation is end'); });
});
Стандартні значення тривалості анімації:
jQuery.fx.speeds = {
_default: 400
slow: 600,
fast: 200,
};
Fade
.fadeIn( [ duration ] [, complete ] ); - параметри функції: тривалість анімації та call-back функція, що виконається по закінченню анімації.
$('.submenu').fadeIn(); - відображає елемент, збільшуючи його прозорість (на початку анімації елемент отримує display: block, inline-block, inline i т.п.).
$('.submenu').fadeOut(); - ховає елемент, зменшуючи його прозорість (в кінці анімації елемент отримує display: none;).
$('.submenu').fadeToggle(); - ховає чи відображає елемент.
$('.submenu').fadeTo(600, 0.3); - змінює прозорість (opacity) елемента до 0.3 за 600 мс.
click me ==> Element
click me ==> Slow animation (2000 ms)
click me ==> Fade to 0.2
$('button').on('click', function(){ $('.box').fadeToggle(); });
$('button').on('click', function(){ $('.box').fadeToggle(2000); });
$('button').on('click', function(){ $('.box').fadeTo(1000, 0.2); });
Slide
.slideUp( [ duration ] [, complete ] ); - параметри функції: тривалість анімації та call-back функція, що виконається по закінченню анімації.
$('.submenu').slideDown(); - відображає елемент, збільшуючи його висоту.
$('.submenu').slideUp(); - ховає елемент, зменшуючи його висоту.
$('.submenu').slideToggle(); - змінює видимість елемента.
click me ==> Element
click me ==> Slow animation
stop ==> Slow animation
stop(true) ==> Slow animation
stop(true, true) ==> Slow animation
$('button').click(function(){ $('.box').slideToggle(); });
$('button').click(function(){ $('.box').slideToggle(1000); });
Animate
.animate( properties [, duration ] [, easing ] [, complete ] ) - метод анімації, повний синтаксис.
properties - стилі, що потребують анімації.
duration - тривалість анімації.
easing - плавність переходу, тип переходу (параметрична функція).
complete - функція, що буде виконана після завершення анімації.
Є ще один синтаксис, з більшою кількістю налаштувань.
$('.submenu').animate( { opacity: 0.25, left: "+=50" }, 500, 'linear', function(){
console.log('Анімацію завершено.');
});
.stop( [clearQueue ] [, jumpToEnd ] ); - зупиняє анімацію, якщо вона виконується в даний момент. Можна передати 2 булевих значення: очищення стеку анімацій та перехід в кінцевий стан анімації.
Перед початком анімації бажано зупинити попередні анімації:
$('.submenu').stop(true, true).animate(...);.
.delay( 800 ); - затримка, пауза перед виконанням наступної анімації.
click me ==> Slow animation
$('button').on('click', function(){
$('.box').slideUp(2000).delay(2000).fadeIn(2000);
});
Якщо у вас не хоче працювати .delay(), скористайтесь класичним setTimeout();
Для анімації кольору потрібно підключити додатковий плагін, або jQuery UI, або використати CSS-анімацію.
Часто замість того, щоб намагатися зробити нескладну анімацію на jQuery, можна просто переключати у елемента клас, а анімацію покласти на CSS, про що буде йтися у наступному розділі.
$('.box').toggleClass('active');
.box { color: green; left: 20px; top: 20px; transition: all ease 400ms;}
.box.active { color: red; left: 40px; top: 40px; }
Завдання
- Збережіть собі в папку нового проекту файл jquery_animation_homework.html.
- Анімуйте першу менюшку .gamburger. Спробуйте метод .toggle(), задайте час анімації.
Замість .toggle() спробуйте методи .hide(), .show(), задаючи в кінці відображення жовтий фон для меню, а при початку ховання - повертати білий фон. - При кліку на кнопку "Show popup" плавно відобразити попап, а при кліку на кнопку "Ок" чи темну область довкола - плавно сховати його.
- Анімуйте за допомогою .slideDown() блок "Часті питання". Відповіді повинні бути по-замовчуванню сховані (розкоментуйте відповідний стиль в горі сторінки).
- Анімуйте меню #nav1 за допомогою .slideToggle().
- При наведенні курсора на текст "Moving text" його шрифт повинен плавно збільшитися до 70px. Якщо курсор забрати - плавно зменшитися до 16px.
- Зробіть так, що при прокрутці екрана текст "Moving text" переміщався зліва направо (і навпаки при прокрутці вгору).
CSS-анімація
Для різноманітних ефектів часто цілком достатньо CSS-анімації, наприклад, для постійно діючої анімації (крутиться шестерня), ховер-ефектів, випадаючих елементів та ін.
transition: property duration timing_function delay; - стиль, що робить анімацію між двома станами.
property - стилі, які необхідно анімувати (all - всі стилі).
duration - тривалість анімації в секундах, мілісекундах, хвилинах...
timing_function - функція плавності анімації (linear, ease, ...).
delay - затримка перед початком анімації.
Розглянемо приклад:
TEST
.test1 {
display: inline-block;
padding: 24px 60px;
color: black;
background: silver;
transition: background 2s linear 2s;
}
.test1:hover {
color: white;
background: blue;
}
При ховері міняється колір тексту та фон. Але для фона задано анімацію тривалістю 2 секунди, яка має виконатися із затримкою у 2 секунди.
Можна задати окремо анімацію для різних стилів, окремо на втрату ховера:
TEST
.test2 {
color: black;
background: silver;
transition: all 400ms;
}
.test1:hover {
color: white;
background: blue;
transition: color 10s, background 2s;
}
Змінити стан можна багатьма способами, зміною класів, атрибутів, checked, didabled, :focus...
Клік = toggleClass('active') input:focus
$('.box').on('click', function(){ $(this).toggleClass('active'); });
2D-трансформації
transform: rotate(angle); - обертання елемента.
transform: translate(x, y); - зміщення елемента по осях X, Y.
transform: scale(n); - маштабування елемента, є також scaleX, scaleY.
transform: skewX(angle); - наклон елемента, є також skewY.
transform: matrix(...); - трансформація елемента відповідно до матриці перетворень.
rotate(40deg) translate(-5%, 10px) scale(2) scale(0.3, 0.7) skewX(40deg) skewY(40deg)
Трансформації відбуваються миттєво. Проте, можна добавити анімацію transition: transform 2s ease;:
rotate(40deg) translate(-50%, 100px) scale(2) scale(0.5, 0.2) skewX(40deg) skewY(40deg) scale cubic-bezier flip mirror
Випадаюче меню:
.menu1:hover ul,
.menu2:hover ul { transition: height 400ms linear;}
.menu1:hover ul { height: auto;}
.menu2:hover ul { height: 159px;}
$('.menu3').hover(function(){
$('.menu3 ul').slideToggle();
});