2. Задача 95
Завантажте файл за адресою:
goo.gl/T8WWbB
Додайте такий код, який створить
ефект випадаючого меню при
натисканні на поле “Меню”.
Пункти “меню” при наведенні мишки
повинні змінювати колір.
4. Анімація методом animate()
Синтаксис:
$(selector).animate({params},speed,callback);
Приклад 1:
$("button").click(function(){
$("div").animate({left: '250px'});
});
Приклад 2:
$("button").click(function(){
$("div").animate({
left: '250px',
opacity: '0.5',
height: '150px',
width: '150px'
});
});
...
<div
style="background:#00F;height:80px;width:80px;position:ab
solute;"></div>
5. Анімувати можна дуже багато CSS-властивостей, але
треба дотримуватись “верблюжого” стилю в назвах.
Наприклад, CSS-властивіть padding-left анімується
параметом paddingLeft. Колір у базовій jQuery-
бібліотеці не анімується.
Використання відносних величин:
$("button").click(function(){
$("div").animate({
left: '250px',
height: '+=150px',
width: '+=150px'
});
});
Можна використовувати "show", "hide", "toggle":
$("div").animate({
height: 'toggle'
});
6. Анімація по черзі.
Якщо зміну CSS-параметрів помістити не в одну команду
animate, а в кілька, вони будуть виконуватись по черзі.
Приклад:
$(document).ready(function(){
$("button").click(function(){
var div = $("img");
div.animate({left: '+=300px', opacity: '0.8'},
"slow");
div.animate({top: '+=300px', opacity: '0.2'}, "slow");
div.animate({left: '-=300px', top: '-=300px', opacity:
'1'}, "slow");
});
});
...
<button>Старт</button>
<img src="images/circle_green.png" style="position:absolute;">
7. Задача 96
Задайте для тексту “jQuery” збільшення
розміру шрифту на 50px і збільшення
відступу зліва на 40%.
9. Зупинка анімації.
Передчасно зупинити анімацію можна методом stop().
Синтаксис:
$(selector).stop(stopAll,goToEnd);
stopAll – необов’язковий булевий параметр.
Визначає, чи повинна зупинитись вся анімаційна
черга. По замовчуванню – false.
goToEnd – необов’язковий булевий параметр.
Визначає, чи повинна миттєво завершитись анімація.
По замовчуванню – false.
Приклад:
$("#btStart").click(function(){
$("#jq").fadeIn(5000);
$("#jq").animate({fontSize: '+=50px'}, "slow");
$("#jq").animate({marginLeft: '40%'}, "slow");
})
$("#btStop").click(function(){
$("#jq").stop(false, true);
})
10. Задача 97
Розмістіть у div’і слово Hello!.
Запрограмуйте по кліку на div’і відносне
зміщення слова праворуч на 200px
впродовж 3 секунд і, згодом, збільшення
розміру шрифту на 50px. Наведення
мишки на div повинно зупиняти анімацію.
Поекспериментуйте з параметрами.
12. Використання callback-функцій.
Callback-функція запускається після виконання анімації.
Приклад:
$("img").click(function(){
$(this).hide("slow", function(){
alert("Картинка сховалась");
});
});
В прикладі використана анонімна функція, але можна
вписувати й іменовані функції.
13. Задача 98
Розмістіть на сторінці кнопку, картинку і
підпис до картинки. Картинка і підпис
спочатку мають бути приховані. При
натисканні кнопки повинна з’являтись
картинка, а потім (через окрему функцію)
– підпис до картинки.
15. Ланцюжок методів.
До одного елемента jQuery-методи можна застосувати по
черзі, якщо прописати їх ланцюжком, як на прикладі:
$(document).ready(function(){
$("button").click(function(){
$("#p1").css("color",
"red").slideUp(2000).slideDown(2000);
});
});
Для зручності код можна розділяти на рядки:
$("#p1").css("color", "red")
.slideUp(2000)
.slideDown(2000);
