jQuery має ряд функцій, які виконують анімаційні ефекти з елементами сторінки. Починаючи від простих можливостей: приховування, появи, переміщення елементів, бібліотека дозволить створювати свої, більш складні ефекти, засновані на зміні CSS властивостей.
Ці зміни можуть відбуватися плавно або миттєво, сповільнюватися, прискорюватися або виконуватися рівномірно.
.show () .hide ()
Миттєво показує / приховує вибрані елементи, встановивши їх css-властивість display в none, не змінюючи при цьому їх прозорість і розміри.
.show (duration, [callback]) .hide (duration, [callback])
duration - тривалість виконання анімації (появи або приховування).
Може бути задана в мілісекундах (200 і 600 мілісекунд)
Може бути задана строковим значенням 'fast' або 'slow'.
Якщо цей параметр не заданий, анімація буде відбуватися миттєво, елемент просто з'явиться / зникне
callback - функція, задана в якості обробника завершення анімації (появи або приховування).
.show ([duration], [easing], [callback]) .hide ([duration], [easing], [callback])
easing - зміна швидкості анімації (чи буде вона сповільнюється до кінця виконання або навпаки прискориться).
jQuery доступні лише дві такі функції: 'linear' і 'swing'
(Для рівномірної анімації та анімації з прискоренням)
Інші варіанти можна знайти в плагінах. наприклад, jQuery UI надає більше 30 нових динамік.
Показуємо всі приховані параграфи. Використовуємо в якості параметра ключове слово slow. При цьому анімація виконується протягом 600 мілісекунд.
Відкрийте приклад в новому вікні і подивіться вихідний код
Показуємо все приховані елементи div по порядку, використовуючи ключове слово fast. Кожна анімація займає 200 мілісекунд і по завершенні чергової стартує наступна.
Відкрийте приклад в новому вікні і подивіться вихідний код
Приховуємо елементи div при натисканні на них протягом 2 секунд і коли елемент вже прихований, видаляємо його. Спробуйте дуже швидко покликати по div'ам.
Відкрийте приклад в новому вікні і подивіться вихідний код
.slideDown ([duration], [easing], [callback]) .slideUp ([duration], [easing], [callback])
За допомогою цих функцій можна показувати і приховувати вибрані елементи на сторінці, за рахунок плавного розгортання і згортання.
Відзначимо, що після приховування елементу, його css-властивість display стає рівним none. а перед появою, воно отримує своє колишнє значення назад.
Відкриваємо, "ковзаючи вниз", все елементи div. Щоб встановити період використовуємо ключове слово "slow", тобто відкриваємо повільно.
Відкрийте приклад в новому вікні і подивіться вихідний код
Відкрийте приклад в новому вікні і подивіться вихідний код
.slideToggle ([duration], [easing], [callback])
Виклик цього методу призводить до плавного згортання (якщо елемент розгорнуто) або розгортання (якщо елемент у згорнутому вигляді) обраних елементів на сторінці.
Відзначимо, що після приховування елементу, його css-властивість display стає рівним none, а перед появою, воно отримує своє колишнє значення назад. При натисканні на кнопку елемент з картинкою і текстом буде по черзі згортатися і розгортатися:
Відкрийте приклад в новому вікні і подивіться вихідний код
.fadeIn ([duration], [easing], [callback]) .fadeOut ([duration], [easing], [callback])
За допомогою цих функцій можна показувати і приховувати вибрані елементи на сторінці, за рахунок плавної зміни прозорості.
Відзначимо, що після приховування елементу, його css-властивість display автоматично стає рівним none, а перед появою, воно отримує своє колишнє значення назад.
"Проявляємо" приховані елементи div один за іншим, кожен раз анімаційний ефект займає час приблизно в 600 мс.
Відкрийте приклад в новому вікні і подивіться вихідний код
"Проявляємо" червоний блок поверх тексту. По завершенні цієї анімації запускається наступний ефект, який "проявляє" тег span.
Відкрийте приклад в новому вікні і подивіться вихідний код
.fadeTo ([duration], opacity, [easing], [callback])
Змінює рівень прозорості у вибраних елементів на сторінці. Дозволяє змінювати прозорість плавно.
fadeTo приймає ті ж аргументи, що і show або hide.
І крім того другий аргумент opacity - число від 0 до 1, що характеризує "цільову" прозорість елемента.
Відкрийте приклад в новому вікні і подивіться вихідний код
Міняємо прозорість елементів div випадковим чином.
Тривалість ефекту приблизно 200 мс.
Відкрийте приклад в новому вікні і подивіться вихідний код
.fadeToggle ([duration], [easing], [callback])
Виклик цього методу призводить до плавного зникнення (якщо елемент не прихований) або появи (якщо елемент прихований) обраних елементів на сторінці, за рахунок зміни прозорості.
Відзначимо, що після приховування елементу, його css-властивість display стає рівним none, а перед появою, воно отримує своє колишнє значення назад.
При натисканні на кнопку елемент з картинкою і текстом буде по черзі з'являтися і зникати:
Відкрийте приклад в новому вікні і подивіться вихідний код
.animate (properties, [duration], [easing], [callback])
Виконує задану користувачем анімацію, з вибраними елементами. Анімація відбувається за рахунок плавної зміни CSS-властивостей у елементів.
properties - список CSS-властивостей, які беруть участь в анімації і їх кінцевих значень.
Здається об'єктом, в форматі Це дуже схоже на завдання групи параметрів в методі .css ()
Однак, properties має більш широкий діапазон типів значень.
Вони можуть бути задані не тільки у вигляді звичних одиниць:
чисел, пікселів, відсотків і ін.
але ще і відносно. Крім того, можна задавати значення "hide", "show", "toggle", які сховають, покажуть або змінять видимість елемента на протилежну, за рахунок параметра, до якого вони застосовані.
Приховає div-елементи, за рахунок зменшення прозорості та зменшення висоти (згортанням) елемента. Відзначимо, що в параметрі properties можна вказувати тільки ті css-властивості, які задаються за допомогою числових значень.
Наприклад, властивість background-color використовувати не слід.
Розширений довідник по .animate ()
Клацніть по кнопці, щоб запустити анімацію для елемента div.
Відкрийте приклад в новому вікні і подивіться вихідний код
Приклад "відносної" анімації. Покликали кілька разів по кнопках вправо / вліво.
Відкрийте приклад в новому вікні і подивіться вихідний код
Подивіться наступний приклад - буде набагато зрозуміліше.
Перша кнопка якраз демонструє приклад такої паралельної анімації. Якийсь елемент з ідентифікатором # block1 повинен змінити свою ширину до 90% від можливої, шрифт повинен бути встановлений в розмір 24px і права рамка повинна стати шириною 15px.
Зверніть увагу, що зміна ширини відбувається одночасно з іншими двома ефектами, які вже йдуть один за одним в порядку черги.
Друга кнопка запускає майже таку ж анімацію, ось тільки все ефекти слідують один за одним строго по черзі.
Відкрийте приклад в новому вікні і подивіться вихідний код
повертає: jQuery
Зупиняє всі запущені анімаційні ефекти для всіх елементів набору.
Клацніть по кнопці Go, щоб запустити анімацію.
Потім по кнопці Stop, щоб її зупинити.
Ну а клік по кнопці Back запустить другий анімаційний ефект - блок буде рухатися у зворотний бік.
Зауважте, що відлік буде вестися від тієї позиції в якій блок був зупинений.
Відкрийте приклад в новому вікні і подивіться вихідний код
повертає: Array
Повертає посилання на чергу елемента (масив функцій).
Розберіть цей приклад. По кліку на кнопці ми отримуємо довжину черги в поточний момент.
Відкрийте приклад в новому вікні і подивіться вихідний код
.queue (callback)
повертає: jQuery
Додає нову функцію, яка долна бути виконана, в кінець черги для всіх елементів набору.
У прикладі: чергу призначених для користувача функцій.
Відкрийте приклад в новому вікні і подивіться вихідний код
.queue (queue)
повертає: jQuery
Замінює чергу для всіх елементів набору нової чергою (масив функцій).
У прикладі, при натисканні на кнопці Stop, встановлюється масив черги, щоб видалити поточну чергу. По кліку на кнопці Start чергу запускається знову.
Відкрийте приклад в новому вікні і подивіться вихідний код
.dequeue ()
повертає: jQuery
Видаляє поставлену в кінець черги функцію, дозволяючи черзі тривати.
У прикладі dequeue використовується, щоб дозволити черзі продовжитися після використання queue (callback). Спробуйте прибрати в прикладі рядок $ (this) .dequeue (); і Ви виявите, що анімація зупиниться після спрацьовування toggleClass.
Відкрийте приклад в новому вікні і подивіться вихідний код