Анімація з jQuery

jQuery робить тривіальним додавання найпростіших ефектів на сторінку. Ефекти можуть використовувати вбудовані налаштування або індивідуально підганяти тривалість анімації. Ви також можете створювати власну анімацію довільних властивостей CSS.>документації.

Важливе зауваження щодо анімації. У сучасних браузерах, особливо на мобільних пристроях, часто анімацію набагато ефективніше отримати за допомогою CSS, а не JavaScript. Подробиці цьому виходять за рамки цього посібника, але якщо ви орієнтуєтеся тільки на мобільні пристрої або браузери, які підтримують анімацію через стилі, то повинні використовуватися для анімації CSS, де це можливо. Ви також можете встановити jQuery.fx.off як true на пристроях з обмеженими ресурсами; це негайно встановить методи анімації для елементів у потрібний стан, при якому анімація не відбувається. :

• .show() — показати вибрані елементи;
• .hide() — приховати вибрані елементи;
• .fadeIn() — анімація прозорості вибраних елементів до 0%;
• .fadeOut() — анімація прозорості вибраних елементів до 100%;
• .slideDown() — відображення вибраних елементів елементів за допомогою вертикального ковзного руху;
• .slideUp() — приховування вибраних елементів за допомогою вертикального ковзного руху;
• .slideToggle() — показати або приховати вибрані елементи з вертикальним ковзним рухом залежно від того , видно елементи в даний момент чи ні.

Після створення вибірки ми просто застосовуємо до неї ефект.

<code data-language="javascript">$( ' .hidden').show();

Ви також можете вказати тривалість вбудованих ефектів. Є два способи зробити це: можете встановити час у мілісекундах

<code data-language="javascript">$( '.hidden').show( 300);

або використовувати одну з встановлених швидкостей:

<code data-language="javascript">$( '.hidden').show( 'slow');

Попередні швидкості вказані в об'єкті jQuery.fx.speeds. Ви можете змінити цей об'єкт, щоб перевизначити значення за замовчуванням або розширити його новими іменами:

<code data-language="javascript">//Перевстановити встановлену швидкість jQuery.fx.speeds.fast=50; //Створити нову встановлену швидкість jQuery.fx.speeds.turtle=3000; //Оскільки ми перевстановили швидкість 'fast', тепер анімація //триває 50 мілісекунд $( '.hidden').hide( 'fast'); //Після їх створення ми можемо використовувати користувацькі швидкості //подібно до вбудованих $( '.other-hidden').show( 'turtle');

Часто вам потрібно зробити щось після завершення анімації — якщо ви спробуєте зробити це до закінчення анімації, це може вплинути на якість анімації або призвести до видалення елементів, які є частиною анімації. Ви можете надати функцію зворотного дзвінка для методів анімації, якщо хочете вказати, що має відбутися після завершення ефекту. Всередині цієї функції this вказує на вихідний елемент DOM, до якого застосовувався ефект. Подібно до подій ми можемо перетворити його на об'єкт jQuery через $(this).

<code data-language="javascript">$( 'p.old ').fadeOut( 300, function() { $( this).remove(); });

Зверніть увагу, що якщо вибірка не містить будь-яких елементів, то ваша функція зворотного дзвінка ніколи не буде виконано! Якщо вам потрібно виконати функцію незалежно від того, є елементи у вибірці чи ні, то ви можете створити функцію і використовувати її так:

<code data-language="javascript">var oldElements=$( 'p .old'); var thingToAnimate=$( '#nonexistent'); //Ця функція буде «зворотний виклик» для методу show, //коли елементи будуть показані. В іншому випадку ми просто викличемо негайно var removeOldElements=function() { oldElements.remove(); }; if ( thingToAnimate.length) { //Коли передається як функція зворотного виклику для show, //ця функція буде викликана після завершення анімації thingToAnimate.show( 'slow', removeOldElements); } 
else { removeOldElements(); }

Довільні ефекти з .animate()

Якщо вбудовані анімації не підходять, ви можете використовувати .animate() створення довільної анімації більшості властивостей CSS. Врахуйте, що ви не можете анімувати властивість color, але є плагін, який робить його можливим.

У методу .animate() є три аргументи:

• об'єкт, що визначає властивості анімації;
• тривалість анімації в мілісекундах;
• функція зворотного виклику, яка буде викликатись після закінчення анімації.

Метод .animate() може анімувати до вказаного кінцевого значення або збільшити наявне значення.

<code data-language="javascript">$( '.funtimes').animate({ left: '+=50', //збільшити на 50 opacity: 0.25, fontSize: '12px' }, 300, function() { //виконується, коли анімація завершена });

Зверніть увагу, що якщо ви хочете анімувати властивість CSS, назва якого включає дефіс, потрібно використовувати CamelCase варіант написання властивості, якщо ви не візьмете його в лапки. Наприклад, властивість font-size вказується як fontSize.

Керування анімацією

jQuery пропонує два важливі методи для керування анімацією.

• .stop() — зупиняє анімацію для вибраних елементів.
>
• .delay() — пауза перед виконанням наступної анімації. Як аргумент передається бажаний час очікування в мілісекундах.

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