Theme25-jQuery2

slideDown(), slideOut(), slideToggle()
Задають ефекти “висковзування”.
Синтаксис:
$(selector).slideIn(speed,callback);
$(selector).slideOut(speed,callback);
$(selector).slideToggle(speed,callback);
Приклад:
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
</script>
<style>
#panel, #flip {
padding:5px; text-align:center; background-color: #eec;
}
#panel {padding: 50px; display: none;}
</style></head>
<body>
<div id="flip">Клік сюди</div>
<div id="panel">Hello world!</div>

Задача 95
Завантажте файл за адресою:
goo.gl/T8WWbB
Додайте такий код, який створить
ефект випадаючого меню при
натисканні на поле “Меню”.
Пункти “меню” при наведенні мишки
повинні змінювати колір.

Розв’язок
<script src="jquery-3.2.1.min.js"></script>
<script>
$("#flip").click(function(){
$("#panel").slideToggle("fast");
});
});
</script>
<style>
...
li:hover{
background-color: #e5eecc;
}
</style>

Анімація методом animate()
Синтаксис:
$(selector).animate({params},speed,callback);
Приклад 1:
$("button").click(function(){
$("div").animate({left: '250px'});
});
Приклад 2:
$("div").animate({
left: '250px',
opacity: '0.5',
height: '150px',
width: '150px'
});
});
...
<div
style="background:#00F;height:80px;width:80px;position:ab
solute;"></div>

Анімувати можна дуже багато CSS-властивостей, але
треба дотримуватись “верблюжого” стилю в назвах.
Наприклад, CSS-властивіть padding-left анімується
параметом paddingLeft. Колір у базовій jQuery-
бібліотеці не анімується.
Використання відносних величин:
$("div").animate({
left: '250px',
height: '+=150px',
width: '+=150px'
});
});
Можна використовувати "show", "hide", "toggle":
$("div").animate({
height: 'toggle'
});

Анімація по черзі.
Якщо зміну CSS-параметрів помістити не в одну команду
animate, а в кілька, вони будуть виконуватись по черзі.
Приклад:
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;">

Задача 96
Задайте для тексту “jQuery” збільшення
розміру шрифту на 50px і збільшення
відступу зліва на 40%.

Розв’язок
<script>
$("#jq").animate({fontSize: '+=50px'}, "slow");
$("#jq").animate({marginLeft: '40%'}, "slow");
});
</script>
</head>
<body>
<p id="jq" style="position: absolute;">jQuery</p>
</body>

Зупинка анімації.
Передчасно зупинити анімацію можна методом 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);
})

Задача 97
Розмістіть у div’і слово Hello!.
Запрограмуйте по кліку на div’і відносне
зміщення слова праворуч на 200px
впродовж 3 секунд і, згодом, збільшення
розміру шрифту на 50px. Наведення
мишки на div повинно зупиняти анімацію.
Поекспериментуйте з параметрами.

Розв’язок
<script>
$("div").click(function(){
$(this).animate({"left": "+=200px"}, 3000);
$(this).animate({fontSize: '+=50px'}, "slow");
})
$("div").mouseenter(function(){
$(this).stop(false, false);
})
});
</script>
</head>
<body>
<div style="position: absolute;">Hello!</div>
</body>

Використання callback-функцій.
Callback-функція запускається після виконання анімації.
Приклад:
$("img").click(function(){
$(this).hide("slow", function(){
alert("Картинка сховалась");
});
});
В прикладі використана анонімна функція, але можна
вписувати й іменовані функції.

Задача 98
Розмістіть на сторінці кнопку, картинку і
підпис до картинки. Картинка і підпис
спочатку мають бути приховані. При
натисканні кнопки повинна з’являтись
картинка, а потім (через окрему функцію)
– підпис до картинки.

Розв’язок
<script>
$("img").slideDown("slow", showText);
});
function showText(){
$("div").fadeIn("slow");
}
});
</script> </head>
<body>
<button id=btStart>Start</button><br>
<img src="images/lake.jpg" style="display: none;">
<div style="display: none;">Лісове озеро</div>
</body>

Ланцюжок методів.
До одного елемента jQuery-методи можна застосувати по
черзі, якщо прописати їх ланцюжком, як на прикладі:
$("#p1").css("color",
"red").slideUp(2000).slideDown(2000);
});
});
Для зручності код можна розділяти на рядки:
$("#p1").css("color", "red")
.slideUp(2000)
.slideDown(2000);

Theme25-jQuery2

More Related Content

More from Олег Вілігурський (20)

Theme25-jQuery2