1.14M

Category:

internet

Анимація та ефекти у jQuery

1. Анімація та ефекти

Функція animate()
$("selector").animate({ styles }, duration,easing,function);
styles – значення стилів, які повинні бути у певного об’єкта до кінця анімації.
$("p").animate({left: "100px";}, duration, easing, function); – анімація руху елемента p з
поточної позиції в позицію left=100px
duration – швидкість анімації "slow", "normal", або "fast". Також можна вказати
швидкість в мілісекундах
$("p").animate({ left: "100px";}, 1000, easing, function); – анімація завершиться через 1
секунду (1000 мілісекунд)
easing – ім’я ефекту ослаблення, який ви хочете використовувати. Існують два
вбудованих значення:«linear» и «swing».
$("p").animate({ color: "red"; text-align: "center" }, 1000,linear,function);
1

2. Функція animate() та її параметри

Callback function
Callback функція, яка запускається після закінчення анімаційних
ефектів. Виконується одноразово для кожного елемента.
$("div").animate(
{ opacity: 0.25, marginLeft: '150px' },
5000,
function () {
alert("Кінець Заняття!");
});
2

3. Ефекти в jQuery

Функція
Опис
.show()
функція відображає кожен з елементів набору, якщо вони
були приховані (або через функцію hide(), або display: none).
.hide()
функція приховує кожен з елементів набору, якщо вони були
видимими. Якщо всі елементи приховані, то нічого не
відбувається.
.toggle()
функція перемикає режим відображення кожного з елементів
набору.
.slideDown()
функція відображає всі елементи набору, використовуючи
ефект зміни висоти елементів.
.slideUp()
функція приховує всі елементи набору, використовуючи ефект
зміни висоти елементів.
3

4. Ефекти в jQuery

Функція
Опис
.slideToggle()
функція перемикає видимість елементів набору,
використовуючи ефект зміни висоти елементів.
.fadeIn()
функція робить видимими всі елементи набору,
використовуючи зміну прозорості елементів.
.fadeOut()
функція робить невидимими всі елементи набору,
потім встановлює CSS властивість display в «none».
.fadeTo()
функція робить більш/менш невидимими всі
елементи набору, змінюючи прозорість елементів до
величини, зазначеної в аргументі.
4

5. .show()

• element.show() – швидкість відображення за замовчуванням.
• element.show(speed) – швидкість відображення передається як
аргумент, при цьому можна вказати кількість мілісекунд або одне
зі стандартних значень (slow, normal, fast).
• element.show(speed,function) –
другим аргументом можна
вказати ім’я функції, яка
виконається при завершенні
анімації.
5

6. .hide()

• element.hide() – швидкість зникнення за замовчуванням.
• element.hide(speed) – швидкість зникнення передається як
аргумент, при цьому можна вказати кількість мілісекунд або одне
зі стандартних значень (slow, normal, fast).
• element.hide(speed,function) –
другим аргументом можна
вказати ім’я функції, яка
виконається при завершенні
анімації.
6

7. .toggle()

• element.toggle() – швидкість відображення за замовчуванням.
• element.toggle(speed) – швидкість відображення передається як
аргумент, при цьому можна вказати кількість мілісекунд або одне
зі стандартних значень (slow, normal, fast).
• element.toggle(bool) – як аргумент передається значення
перемикача (true – відображає елементи, false – приховує
елементи).
• element.toggle(speed,function) –
другим аргументом можна вказати
ім’я функції, яка виконатися
при завершенні анімації.
7

8. Приховати-показати div

.html
<body>
<div id="les8_ex1"></div>
<input type="button" value="Сховати" onclick="hideDiv();">
<input type="button" value="Показати" onclick="showDiv();">
</body>
.css
.js
function hideDiv(){
$('#lect3_ex1').hide();
}
function showDiv(){
$('#lect3_ex1').show();
}
#lect3_ex1{
width:400px;
height:100px;
background:#666699;
border:1px solid #333366;
margin-bottom:20px;
}
8

9.

.slideDown()
.slideDown() – функція приховує всі елементи набору, використовуючи
ефект зміни висоти елементів.
• element.slideDown() – швидкість зникання за замовчуванням.
• element.slideDown(speed) – швидкість зникання передається як
аргумент, при цьому можна вказати кількість мілісекунд або одне із
стандартних значень (slow, normal, fast).
• element.slideDown(speed,function) – другим
аргументом можна вказати ім’я функції,
яка виконатися при завершенні анімації.
9

10.

.slideUp()
.slideUp() – функція приховує всі елементи набору, використовуючи
ефект зміни висоти елементів.
• element.slideUp() – швидкість появи за замовчуванням.
• element.slideUp(speed) – швидкість появи передається як аргумент,
при цьому можна вказати кількість мілісекунд або одне
ізстандартних значень (slow, normal, fast).
• element.slideUp(speed,function) – другим аргументом
можна вказати ім’я функції, яка виконатися
при завершенні анімації.
10

11. Фільтрація DOM-дерева

12. Функції фільтрації набору елементів

Функція
Опис
.eq(index)
скорочує число елементів, що співпали до одного.
Аргументом є позиція елемента в наборі елементів, що
співпали.
.not(selector)
видаляє елементи, відповідні вказаному виразу, з набору
елементів, що співпали.
.filter(function)
видаляє всі елементи, які не задовольняють вимогам
функції, з набору елементів, що співпали.
.is(selector)
перевіряє поточний набір елементів на відповідність
вказаному виразу і повертає true, якщо хоча б один
елемент відповідає виразу.
.slice(index, index)
виділяє підмножину з набору елементів, що співпали.
12

13. Метод eq(index)

.eq (index) – скорочує число елементів, що співпали до одного.
Аргументом є позиція елемента в наборі елементів, що
співпали, починається з 0 і продовжується до length-1.
13

14. Метод not(selector)

.not (selector) – видаляє елементи, що відповідають вказаному виразу, з
набору елементів, що співпали. Вираз може бути як окремим селектором,
так і складною селекторною конструкцією.
14

15. Методи filter()

.filter(selector) – видаляє всі елементи, які не відповідають
вказаному виразу, з набору елементів, що співпали.
.filter(function) – якщо передати методу filter() деяку функцію, він
викличе її для кожного елемента в наборі і виключить ті
елементи, для яких ця функція поверне значення false.
15

16. Метод slice(start, stop)

.slice(start, stop) – виділяє підмножину з набору елементів, що співпали. Поводиться
так само як і вбудований метод поділу масивів (допускаються негативні значення). Не
включаючи останній індекс, але включаючи перший.
16

17. Переміщення по DOM-дереву

18. Функції пошуку по DOM в jQuery

Функція
Опис
.contents()
додає в уже існуючий набір додаткові елементи, які
задовольняють зазначеному виразу.
відшукує дочірні елементи, які задовольняють зазначеному
виразу.
пошук всіх дочірніх вузлів в наборі елементів, що співпали
(включаючи текстові).
.children()
отримує набір елементів, що містить всіх безпосередніх
унікальних нащадків для кожного елемента, що співпав.
.sibling()
отримує набір елементів, що містить всі унікальні родинні
елементи для набору елементів, що співпали.
.andSelf()
додавання попереднього набору до поточного набору.
.end()
відміняє останню деструктивну дію.
.add(вираз)
.find(вираз)
18

19. Метод add(selector)

.add(вираз) – додає в уже існуючий набір додаткові елементи, які
задовольняють зазначеному виразу.
19

20. Метод end()

.end() – скасовує останній фільтр, повертаючи тим самим набір елементів до його
попереднього стану (до фільтрації)
20

21. Метод find(selector)

.find(вираз) – відшукує дочірні елементи, які задовольняють
зазначеному виразу.
21

22. Метод children(selector)

.children(вираз) – отримує набір елементів, що містить всіх безпосередніх
унікальних нащадків для кожного елемента, що співпав.
22

23. Функціїпошуку по DOM в jQuery

Функція
Опис
.parent(вираз)
Отримує прямого «батька» елемента.
.parents(вираз)
Отримує набір елементів, що містить унікальних «батьків» для елементів,
що співпали (крім кореневого елемента).
.closest()
Отримує набір, що містить найближчі батьківські елементи, які
задовольняють зазначеному селектору, включаючи початковий елемент.
.offsetParent()
Повертає колекцію jQuery c «батьком» по позиціонуванню «першого
елемента, що співпав».
.next(),
.prev()
Отримує набір елементів, що містить унікальні наступні (попередні)
споріднені елементи для всіх елементів існуючого набору.
.nextAll(),
.prevAll()
Пошук всіх родинних елементів після поточного елемента (перед
поточним елементом).
.nextUntil(селектор),
.prevUntil(селектор)
Пошук всіх родинних елементів після поточного елемента (перед
поточним елементом) до зазначеного селектора.
23

24. Метод parent()

.parent (вираз) – повертає посилання на найближчого батька.
24

25. Метод parents()

.parents() – пошук всіх предків обраних елементів. Будуть вибрані не тільки прямі
батьки, а й прабатьки, прапрародичі і так далі до початку DOM-дерева.
25

26. Метод closest(selector)

.closest(вираз) – починається пошук безпосередньо з обраного (обраних) елемента і
рухається вгору по ієрархії. Рухаючись вгору по ієрархії зупиняє пошук після першого
підходящого елемента (після чого починає здійснювати пошук для наступного обраного
елемента). Тому, знаходить не більше одного елемента для кожного з обраних.
26

27. Метод next()

.next() – отримує набір елементів, що містить тільки сусідні елементи, такі
безпосередньо за вказаними елементом.
27

28. Метод nextAll()

.nextAll() – відшукує всі наступні братські елементи, які відповідають
селектору і йдуть після вибраного елемента.
28

29. Метод nextUntil()

.nextUntil() – отримує всіх наступних братів кожного елемента до, але не включаючи
елемент, відповідний переданому селектору, вузлу DOM або об'єкту jQuery.
29

English Русский Rules