JqueryUI - Эффект
В этой главе мы обсудим effect(), который является одним из методов, используемых для управления визуальными эффектами jQueryUI. Метод effect () применяет эффект анимации к элементам, не показывая или скрывая его.
Синтаксис
В effect() метод имеет следующий синтаксис -
.effect( effect [, options ] [, duration ] [, complete ] )| Sr. No. | Параметр и описание |
|---|---|
| 1 | effect Это строка, указывающая, какой эффект использовать для перехода. |
| 2 | options Он относится к типу Object и указывает параметры и динамику, зависящие от эффекта . Кроме того, каждый эффект имеет свой собственный набор параметров, которые можно указать для нескольких эффектов, описанных в таблице jQueryUI Effects . |
| 3 | duration Имеет тип Number или String и указывает количество миллисекунд эффекта. Его значение по умолчанию - 400 . |
| 4 | complete Это метод обратного вызова, вызываемый для каждого элемента, когда эффект для этого элемента завершается. |
jQueryUI эффекты
В следующей таблице описаны различные эффекты, которые можно использовать с методом effects ().
| Sr. No. | Эффект и описание |
|---|---|
| 1 | blind Отображает или скрывает элемент как оконную шторку: перемещая нижний край вниз или вверх или правый край вправо или влево, в зависимости от указанного направления и режима . |
| 2 | bounce Заставляет элемент отскакивать в вертикальном или горизонтальном направлении, при необходимости показывая или скрывая элемент. |
| 3 | clip Показывает или скрывает элемент, перемещая противоположные границы элемента вместе, пока они не встретятся посередине, или наоборот. |
| 4 | drop Показывает или скрывает элемент, заставляя его упасть на страницу или выпасть с нее. |
| 5 | explode Отображает или скрывает элемент, разделяя его на несколько частей, которые перемещаются в радиальном направлении, как если бы они врезались в страницу или взрывались из нее. |
| 6 | fade Показывает или скрывает элемент, регулируя его непрозрачность. Это то же самое, что и основные эффекты затухания, но без дополнительных опций. |
| 7 | fold Отображает или скрывает элемент, изменяя противоположные границы внутри или снаружи, а затем делая то же самое для другого набора границ. |
| 8 | highlight Привлекает внимание к элементу, на мгновение меняя цвет фона при отображении или скрытии элемента. |
| 9 | puff Расширяет или сжимает элемент на месте, регулируя его непрозрачность. |
| 10 | pulsate Регулирует непрозрачность элемента, включая и выключая, прежде чем убедиться, что элемент отображается или скрывается, как указано. |
| 11 | scale Расширяет или сжимает элемент на указанный процент. |
| 12 | shake Встряхивает элемент вперед и назад, вертикально или горизонтально. |
| 13 | size Изменяет размер элемента до указанной ширины и высоты. Похож на масштаб, за исключением того, как указан целевой размер. |
| 14 | slide Перемещает элемент таким образом, что кажется, что он скользит на страницу или с нее. |
| 15 | transfer Анимирует переходный элемент контура, благодаря которому создается впечатление, что элемент переносится на другой элемент. Внешний вид элемента схемы должен быть определен с помощью правил CSS для класса ui-effects-transfer или класса, указанного в качестве опции. |
Примеры
Следующие примеры демонстрируют использование метода effect () с различными эффектами, перечисленными в приведенной выше таблице.
Эффект - встряхнуть
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI effect Example</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
#box-1 {
height: 100px;
width: 100px;
background: #b9cd6d;
}
</style>
<script>
$(document).ready(function() {
$('#box-1').click(function() {
$( "#box-1" ).effect( "shake", {
times: 10,
distance: 100
}, 3000, function() {
$( this ).css( "background", "#cccccc" );
});
});
});
</script>
</head>
<body>
<div id = "box-1">Click On Me</div>
</body>
</html>Сохраним приведенный выше код в HTML-файл. effectexample.htmи откройте его в стандартном браузере, поддерживающем javascript, вы должны увидеть следующий результат. Теперь вы можете поиграть с результатом -
Эффект - взорваться
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI effect Example</title>
<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
#box-2 {
height: 100px;
width: 100px;
background: #b9cd6d;
}
</style>
<script>
$(document).ready(function() {
$('#box-2').click(function() {
$( "#box-2" ).effect({
effect: "explode",
easing: "easeInExpo",
pieces: 4,
duration: 5000
});
});
});
</script>
</head>
<body>
<div id="box-2"></div>
</body>
</html>Сохраним приведенный выше код в HTML-файл. effectexample.htmи откройте его в стандартном браузере, поддерживающем javascript, вы также должны увидеть следующий вывод. Теперь вы можете поиграть с результатом -